Jump to content

Squarespace 7.1 Hiding sections on button click not working

Recommended Posts

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;
}

 

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply
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?

image.thumb.png.d923d121279453c28ec046203aa488d6.pngAlso notice these 2 sections that is not include in the code, should you get rid of them?

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 minutes ago, bangank36 said:

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

image.thumb.png.d923d121279453c28ec046203aa488d6.pngAlso 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!

Link to comment
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!

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.