Jump to content

Tab Sections - help!

Recommended Posts

I'm trying to create 4 tabbed sections but I can't get it to work correctly. I had it working perfectly with three tabs but when I added a fourth it broke. Send help please! Here's the site and code:

https://hexahedron-iguana-cd6z.squarespace.com/matis-facials

Midas2023

 

 

<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    SIGNATURE
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    ANTI-AGEING
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    BEAUTY
  </button>
  <button class="tab-btn" id="tab-4” onclick="tabFourClick()">
    FLASH
  </button>
</div>


<script>
  function tabOneClick() {
    $('button.tab-btn:nth-of-type(1)').addClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");
    $('button.tab-btn:nth-of-type(4)’).removeClass("active");

    $('[data-section-id="63c2de8f67df712a782dd65d"]').addClass("tab-section-show"); 
    $('[data-section-id="63dfc79669b43a22544c5736"]').removeClass("tab-section-show");
    $('[data-section-id="63dfc811b8bcc64a3dbbcc70"]').removeClass("tab-section-show");
    $('[data-section-id="63ececa3b68dad1ab7fac833”]’).removeClass("tab-section-show");
  }


  function tabTwoClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').addClass("active");
    $('button.tab-btn:nth-of-type(3)').removeClass("active");
    $('button.tab-btn:nth-of-type(4)’).removeClass("active");


    $('[data-section-id="63c2de8f67df712a782dd65d"]').removeClass("tab-section-show");
    $('[data-section-id="63dfc79669b43a22544c5736"]').addClass("tab-section-show");
    $('[data-section-id="63dfc811b8bcc64a3dbbcc70"]').removeClass("tab-section-show");
    $('[data-section-id="63ececa3b68dad1ab7fac833”]’).removeClass("tab-section-show");

  }


  function tabThreeClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)').addClass("active");
    $('button.tab-btn:nth-of-type(4)’).removeClass("active");


    $('[data-section-id="63c2de8f67df712a782dd65d"]').removeClass("tab-section-show");
    $('[data-section-id="63dfc79669b43a22544c5736"]').removeClass("tab-section-show");
    $('[data-section-id="63dfc811b8bcc64a3dbbcc70"]').addClass("tab-section-show");
    $('[data-section-id="63ececa3b68dad1ab7fac833”]’).removeClass("tab-section-show");

  }

 function tabFourClick() {
    $('button.tab-btn:nth-of-type(1)').removeClass("active");
    $('button.tab-btn:nth-of-type(2)').removeClass("active");
    $('button.tab-btn:nth-of-type(3)'). removeClass("active");
    $('button.tab-btn:nth-of-type(4)’).addClass("active");


    $('[data-section-id="63c2de8f67df712a782dd65d"]').removeClass("tab-section-show");
    $('[data-section-id="63dfc79669b43a22544c5736"]').removeClass("tab-section-show");
    $('[data-section-id="63dfc811b8bcc64a3dbbcc70"]'). removeClass("tab-section-show");
    $('[data-section-id="63ececa3b68dad1ab7fac833”]’). addClass("tab-section-show");

  }

  $(function() {
    $('[data-section-id="63c2de8f67df712a782dd65d"]').addClass("tab-section-hide");
    $('[data-section-id="63dfc79669b43a22544c5736"]').addClass("tab-section-hide");
    $('[data-section-id="63dfc811b8bcc64a3dbbcc70"]').addClass("tab-section-hide");
    $('[data-section-id="63ececa3b68dad1ab7fac833"]').addClass("tab-section-hide");
    tabOneClick();
  });
</script>

 

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

You have a mistake here, there's a space where there shouldn't be one:

 

image.png.0a1d83a4d225c784f5c8e23b4704376d.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

I'm not sure what this last function section is doing but every block is set to hide:

image.thumb.png.43e4e2c7512a9e54699ee0b7a578f8e3.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Sorry, I can't see any other issues from what you've shown me.

Can you go back to the code source and find help there?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.