Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Adding tabs without a plugin.


babblewrap

Question

18 answers to this question

Recommended Posts

  • 1

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
22 hours ago, ferguswood said:

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

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@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! 

My simple eCommerce solutions help you sell on Squarespace with confidence so that you can focus on running your business.

New posts weekly: eCommerce Blog

Free PDF: 50 Simple Black Friday & Cyber Monday Tips

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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. 

My simple eCommerce solutions help you sell on Squarespace with confidence so that you can focus on running your business.

New posts weekly: eCommerce Blog

Free PDF: 50 Simple Black Friday & Cyber Monday Tips

Link to comment
  • 0

@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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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!

My simple eCommerce solutions help you sell on Squarespace with confidence so that you can focus on running your business.

New posts weekly: eCommerce Blog

Free PDF: 50 Simple Black Friday & Cyber Monday Tips

Link to comment
  • 0
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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!

My simple eCommerce solutions help you sell on Squarespace with confidence so that you can focus on running your business.

New posts weekly: eCommerce Blog

Free PDF: 50 Simple Black Friday & Cyber Monday Tips

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...