ratkaj Posted February 2 Share Posted February 2 Hey Squarespacers -- I'm a bit stuck. I have a site that the client has maxed out the gallery section (250+ images). They want to continue to add images over time so I need to split the images into separate galleries. As you can see on the current page there is a filter plugin that allows the user to filer the images. I'm thinking of setting it up with buttons to hide and show sections with the different galleries in place. Similar feel but would fix my maxed out image issue. Problem is, I'm stuck on the code! Anyone have experience doing this sort of thing that can share? Link to comment
ratkaj Posted February 2 Author Share Posted February 2 Below is the code I'm currently using: <div class="tabs-container"> <button class="tab-btn" id="tab-1" onclick="tabOneClick()"> hardscapes </button> <button class="tab-btn" id="tab-2" onclick="tabTwoClick()"> softscapes </button> <button class="tab-btn" id="tab-3" onclick="tabThreeClick()"> lighting </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"); $('#block-ca3a4c15c6ca6756b3cc').addClass("tab-section-show"); $('#block-yui_3_17_2_1_1675357227734_22569').removeClass("tab-section-show"); $('#block-yui_3_17_2_1_1675357728361_62859').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"); $('#block-ca3a4c15c6ca6756b3cc').removeClass("tab-section-show"); $('#block-yui_3_17_2_1_1675357227734_22569').addClass("tab-section-show"); $('#block-yui_3_17_2_1_1675357728361_62859').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"); $('#block-ca3a4c15c6ca6756b3cc').removeClass("tab-section-show"); $('#block-yui_3_17_2_1_1675357227734_22569').removeClass("tab-section-show"); $('#block-yui_3_17_2_1_1675357728361_62859').addClass("tab-section-show"); } $(function() { $('#block-ca3a4c15c6ca6756b3cc').addClass("tab-section-hide"); $('#block-yui_3_17_2_1_1675357227734_22569').addClass("tab-section-hide"); $('#block-yui_3_17_2_1_1675357728361_62859').addClass("tab-section-hide"); tabOneClick(); }); </script> It's not working at the moment. Any help is greatly appreciated 🙂 Link to comment
tuanphan Posted February 8 Share Posted February 8 Hi, What is page url? We can check code easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
ratkaj Posted February 8 Author Share Posted February 8 We solved the issue, thanks @tuanphan Link to comment
Shamir Posted September 5 Share Posted September 5 On 2/8/2023 at 6:08 PM, ratkaj said: We solved the issue, thanks @tuanphan may I ask how you fixed it? Link to comment
tuanphan Posted September 7 Share Posted September 7 On 9/5/2023 at 8:24 PM, Shamir said: may I ask how you fixed it? If you share link to page where you have problem, we can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Shamir Posted September 14 Share Posted September 14 On 9/7/2023 at 9:44 AM, tuanphan said: If you share link to page where you have problem, we can take a look https://www.hotyogacph.dk/teacher-training-yogauddannelse I offer several courses on a Simple List Section. The page gets just too busy. So I prefer to have some buttons and when people click on one, the info related to that course appear. How can I do it? Link to comment
Shamir Posted September 14 Share Posted September 14 https://www.hotyogacph.dk/teacher-training-yogauddannelse I offer several courses in a Simple List Section. The page gets just too busy. So I prefer to have some buttons, and when people click on one, the info related to that course appears. How can I do it? I appreciate any help. Sha Mir Link to comment
tuanphan Posted September 17 Share Posted September 17 On 9/14/2023 at 2:46 PM, Shamir said: https://www.hotyogacph.dk/teacher-training-yogauddannelse I offer several courses in a Simple List Section. The page gets just too busy. So I prefer to have some buttons, and when people click on one, the info related to that course appears. How can I do it? I appreciate any help. Sha Mir You mean these blocks? Initial: Hide description under green title + add a button, eg: View detail button When user click on this button >> Show description Is this right? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment