Adding tabs without a plugin.

Remove above & try new code

<div class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab-1">Features</a></li>
    <li><a href="#tab-2">Details</a></li>
  </ul>
  <div class="tabs-stage">
    <div id="tab-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</p>
    </div>
    <div id="tab-2">
      <p>Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</p>
    </div>
  </div>
</div>
<style>
  .tabs {
  max-width: 538px;
}
.tabs-nav li {
  float: left;
  width: 50%;
}
.tabs-nav li:first-child a {
  border-right: 0;
  border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
  border-top-right-radius: 6px;
}
.tabs a {
  background: #eaeaed;
  border: 1px solid #cecfd5;
  color: #0087cc;
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
}
.tabs a:hover {
  color: #ff7b29;
}
.tab-active a {
  background: #fff;
  border-bottom-color: transparent;
  color: #2db34a;
  cursor: default;
}
.tabs-stage {
  border: 1px solid #cecfd5;
  border-radius: 0 0 6px 6px;
  border-top: 0;
  clear: both;
  padding: 24px 30px;
  position: relative;
  top: -1px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  // Show the first tab by default
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');

// Change tab class and display content
$('.tabs-nav a').on('click', function(event){
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});
</script>

Hi , You can create it on your own without plugin but it requires little knowledge of css , please visit the following link for more info.

https://www.w3schools.com/w3css/w3css_tabulators.asp

Hope it helps 🙂 

Thank you, humxahafeex.  I'll give it a go.

On 2/22/2021 at 9:00 PM, babblewrap said:

Thank you, humxahafeex.  I'll give it a go.

Have you solved it yet?

Hi Tuan,

I gave it a go and it is outside of my skillset.  

On 3/12/2021 at 5:46 PM, babblewrap said:

Hi Tuan,

 

I gave it a go and it is outside of my skillset.  

Hi. Here some free code. Let me know which code you like, I will send the code for SS.

• https://codepen.io/shayhowe/pen/klAvu
• https://codepen.io/search/pens?q=tabs

Hi @tuanphan, I'm after a solution to this problem also. I like the look of the code from: 

• https://codepen.io/shayhowe/pen/klAvu

Do you think you could send over the code for SS?? Thank you!

22 hours ago, ferguswood said:

Hi @tuanphan, I'm after a solution to this problem also. I like the look of the code from: 

• https://codepen.io/shayhowe/pen/klAvu

Do you think you could send over the code for SS?? Thank you!

Add a Code Block >> Paste this Codepen code

<div class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab-1">Features</a></li>
    <li><a href="#tab-2">Details</a></li>
  </ul>
  <div class="tabs-stage">
    <div id="tab-1">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec neque nisi, dictum aliquet lectus.</p>
    </div>
    <div id="tab-2">
      <p>Phasellus pharetra aliquet viverra. Donec scelerisque tincidunt diam, eu fringilla urna auctor at.</p>
    </div>
  </div>
</div>
<style>
  .tabs {
  max-width: 538px;
}
.tabs-nav li {
  float: left;
  width: 50%;
}
.tabs-nav li:first-child a {
  border-right: 0;
  border-top-left-radius: 6px;
}
.tabs-nav li:last-child a {
  border-top-right-radius: 6px;
}
a {
  background: #eaeaed;
  border: 1px solid #cecfd5;
  color: #0087cc;
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
}
a:hover {
  color: #ff7b29;
}
.tab-active a {
  background: #fff;
  border-bottom-color: transparent;
  color: #2db34a;
  cursor: default;
}
.tabs-stage {
  border: 1px solid #cecfd5;
  border-radius: 0 0 6px 6px;
  border-top: 0;
  clear: both;
  padding: 24px 30px;
  position: relative;
  top: -1px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  // Show the first tab by default
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');

// Change tab class and display content
$('.tabs-nav a').on('click', function(event){
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});
</script>

Hi @tuanphan, the above code gives me this result (see attached)  - any way to stop the grey boxing of the logo, tabs etc?