DreamrW Posted February 15 Share Posted February 15 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
Ziggy Posted February 15 Share Posted February 15 You have a mistake here, there's a space where there shouldn't be one: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
DreamrW Posted February 15 Author Share Posted February 15 22 minutes ago, Ziggy said: You have a mistake here, there's a space where there shouldn't be one: Well spotted Ziggy! I've corrected that in two places, but it's still not working 😞 Link to comment
Ziggy Posted February 15 Share Posted February 15 I'm not sure what this last function section is doing but every block is set to hide: Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
DreamrW Posted February 15 Author Share Posted February 15 1 hour ago, Ziggy said: I'm not sure what this last function section is doing but every block is set to hide: I tried removing that section but it still doesn't work - besides, it worked previously when I had just three tabs with that function so that's not it either :( Link to comment
Ziggy Posted February 15 Share Posted February 15 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? DreamrW 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment