Jump to content

Hide and show sections on button click

Recommended Posts

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
  • Replies 8
  • Views 2.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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
  • 6 months later...
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?

image.thumb.png.e8b58a42658be49fa49fa3f93f7ba8f0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.