Squarespace 7.1 Hiding sections on button click not working

Site URL: https://www.thesquaresandbox.com/tabbed-sections

When I click one of the buttons, the associated section appears correctly at the top. However the other sections are not hidden. This is from an article by Will Myers.

<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    About
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    Gallery
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    Contact
  </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");  
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').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");
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').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");
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-show");
  }
  
  
  $(function() {
    $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-hide");
    $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-hide");
    $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-hide");
    tabOneClick();
  });
</script>

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: 1px solid #999;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
}
.tab-btn{
  max-width:150px;
  display: inline-block;
  border-radius:3px 3px 0 0;
  border:1px solid #999;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  margin-bottom:none !important;
  border:none !important;
  &:not(:first-of-type){
  margin-left:10px;    
  }
}
.tab-btn.active{
  background:lightblue;
}

.tab-section-hide{
  display:none;
}
.tab-section-show{
  display:block;
}

4 minutes ago, Steve48 said:

Site URL: https://www.thesquaresandbox.com/tabbed-sections

When I click one of the buttons, the associated section appears correctly at the top. However the other sections are not hidden. This is from an article by Will Myers.

<div class="tabs-container">
  <button class="tab-btn" id="tab-1" onclick="tabOneClick()">
    About
  </button>
  <button class="tab-btn" id="tab-2" onclick="tabTwoClick()">
    Gallery
  </button>
  <button class="tab-btn" id="tab-3" onclick="tabThreeClick()">
    Contact
  </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");  
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').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");
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').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");
    
    $('[data-section-id="6069af192a871859f3dddfc3"]').removeClass("tab-section-show");
    $('[data-section-id="6069af0fd446556b94c10177"]').removeClass("tab-section-show");
    $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-show");
  }
  
  
  $(function() {
    $('[data-section-id="6069af192a871859f3dddfc3"]').addClass("tab-section-hide");
    $('[data-section-id="6069af0fd446556b94c10177"]').addClass("tab-section-hide");
    $('[data-section-id="6069bad471b2824d888bdf66"]').addClass("tab-section-hide");
    tabOneClick();
  });
</script>

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: 1px solid #999;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
}
.tab-btn{
  max-width:150px;
  display: inline-block;
  border-radius:3px 3px 0 0;
  border:1px solid #999;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  margin-bottom:none !important;
  border:none !important;
  &:not(:first-of-type){
  margin-left:10px;    
  }
}
.tab-btn.active{
  background:lightblue;
}

.tab-section-hide{
  display:none;
}
.tab-section-show{
  display:block;
}

 

I saw them show/hide correctly, what was the issue?

Also notice these 2 sections that is not include in the code, should you get rid of them?

3 minutes ago, bangank36 said:

I saw them show/hide correctly, what was the issue?

Also notice these 2 sections that is not include in the code, should you get rid of them?

 

Thank you. I didn't realize that I had the two extra sections. They must have been there from earlier debugging. I deleted them and everything works now!

1 hour ago, Steve48 said:

Thank you. I didn't realize that I had the two extra sections. They must have been there from earlier debugging. I deleted them and everything works now!

You rock!