Hide and show sections on button click

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?

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 🙂

Hi,

What is page url? We can check code easier

We solved the issue, thanks @tuanphan