Adding tabs without a plugin.

Hi guys,

I'm trying to recreate the tab feature similar to this kickstarter style product pitch page.  Is there a way to do with on Squarespace without a plugin?  If so, could you please point me in the right direction?  Thanks!

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? 

@tuanphan - I have a client that I think must have found your code and she is having the same problem with the grey boxes as @ferguswood above. Any thoughts on how to fix? Thanks! 

On 9/23/2021 at 3:52 AM, KristineNeilStudio said:

@tuanphan - I have a client that I think must have found your code and she is having the same problem with the grey boxes as @ferguswood above. Any thoughts on how to fix? Thanks! 

Can you share link to page where you have problem? We can check easier

8 hours ago, tuanphan said:

Can you share link to page where you have problem?

https://topnotchhomes.squarespace.com/models/p/fairview-4w3rt - right now I just have this code in the additional info section of this one product. 

@KristineNeilStudio

Site-wide password?

1 minute ago, creedon said:

Site-wide password?

Texas

@KristineNeilStudio @ferguswood

Ah. I see the problem. The original pen is styling the a tag without restricting it specifically to the tab effect.

One solution would be to change the following lines...

a {

a:hover {

...to...

.tabs-nav a {

.tabs-nav a:hover {

Let us know how it goes.

3 minutes ago, creedon said:

One solution would be to change the following lines...

That definitely worked to get rid of the weird grey boxes! Now there are just two random bullets by the tabs to get rid of somehow!

On 9/24/2021 at 11:34 AM, KristineNeilStudio said:

Now there are just two random bullets by the tabs to get rid of somehow!

Fascinating. I don't have a 100% handle on this but it appears either codepen or the pen code author use a thing called meyer reset. This mr CSS resets a lot of user agent style sheets to nothing. Normally your browser is making a lot of decisions about how things look if no one provided CSS to tell it how to style things. A default look if you will. Some designers don't want to be told by each browser vendor how their designs should look so they use this reset technique which provides a really blank slate to start from.

I would not suggest using the reset technique for a SS site. So the solution is to knock out the list style for the tabs.

Add the following ruleset to the style tag.

.tabs-nav {

  list-style : none;
  padding-inline-start : unset;
  
}

This also takes care of the padding to the left of the first tab you may have noticed.

Let us know how it goes.

21 hours ago, creedon said:

Let us know how it goes.

Thanks @creedon! I think it's fixed! My client liked the "tabs without a plugin" idea a lot so glad we could make it happen!