Simple Tab Sections in Squarespace 7.0 & 7.1

View Demo

Article

NOTE

On May 4th, 2020, this blog post was overwritten with a previous blog post. As far as I can tell, this was a glitch with Squarespace 7.1. I've been able to recover most of the code and so if you're coming from Youtube the code should be in the code tab. Please let me know if you notice anything off or if you experience a similar issue when working with blogs in Squarespace 7.1.

Code

HTML

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

Javascript

Add this javascript to your page header section. Page Settings » Advanced » Page Header Code Injection

Make sure jQuery is installed for this plugin to work.

<!--Be sure jQuery is loaded on your site.--> 
<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="Section-1"]').addClass("tab-section-show");
    $('[data-section-id="Section-2"]').removeClass("tab-section-show");
    $('[data-section-id="Section-3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
    window.dispatchEvent(new Event('resize'))
  }
  
  
  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="Section-1"]').removeClass("tab-section-show");
    $('[data-section-id="Section-2"]').addClass("tab-section-show");
    $('[data-section-id="Section-3"]').removeClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
    window.dispatchEvent(new Event('resize'))
  }
  
  
  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="Section-1"]').removeClass("tab-section-show");
    $('[data-section-id="Section-2"]').removeClass("tab-section-show");
    $('[data-section-id="Section-3"]').addClass("tab-section-show");
    window.Squarespace.initializeLayoutBlocks(Y);
    window.dispatchEvent(new Event('resize'))
  }
  
  
  $(function() {
    $('[data-section-id="Section-1"]').addClass("tab-section-hide");
    $('[data-section-id="Section-2"]').addClass("tab-section-hide");
    $('[data-section-id="Section-3"]').addClass("tab-section-hide");
    tabOneClick();
  });
</script>
  

CSS

(For Classic Editor)

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

section.tab-section-hide{
  display:none !important;
}
section.tab-section-show{
  display:flex !important;
}

CSS

(For Fluid Engine)

.tabs-container{
  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;
}

section.tab-section-hide{
  display:none !important;
}
section.tab-section-show{
  display:flex !important;
}
  
  @media(max-width:767px) {
.tabs-container{
text-align:center !important;
}

.tab-btn {
display: block !important;
width: 100%;
max-width: 100%;
}
}