How to Add Tabs In Squarespace 7.0 and 7.1

Article

Ok so in this tutorial, I’m going to show you 2 different ways to add tabs to your Squarespace website.

1. How to build them yourself.

2. Use my Super Easy Tabs plugin for $20 (plus extra cool features like sticky tabs)

If you’re curious about code and want to learn some more, read the next tab. If you’re just a designer and want an easy way to install tabs, consider getting my Super Easy Tabs plugin.

---

Build The Tabs

So here’s out example. Let’s say I’m a photographer and I want 3 tabs. One tab that shows a gallery of my work, one tab that shows content about me, and one tab that shows a contact form. Got it? Good.

So the general idea with tabs is very simple: when you hit a button, some content appears and other content disappears. So that simple little sentence is going to structure the rest of our work.

There are two main groups of elements we need to build:

1. Buttons to Click

2. Content to appear and disappear

And there are 2 main actions that need to happen:

1. Content appearing

2. Content disappearing

Adding the elements

So lets’ start with building the content; a gallery, an about me text block, and a contact form. You can do this just as you normally would, without any code. Squarespace 7.1 doesn’t have gallery blocks (please Ms. Squarespace give us Gallery Blocks!), but I used summary blocks without and text instead. This is what mine looks like:

Now, let’s add the buttons at the top (where we want our tabs to be) and here we’ll need some code. Let’s create 3 buttons (one for each content tab that we want), give each one of them a class of "tab-button", and add a unique id that indicates each tab, and then wrap all of the buttons in a container (so we can move them all around together) and give that group a class of "tab-button-group".

<div class="tab-button-group">
  <h3 class="tab-button" id="gallery-tab">Gallery</h3>
  <h3 class="tab-button" id="about-tab">About</h3>
  <h3 class="tab-button" id="contact-tab">Contact</h3>
</div>

Great! So now we’ve added in all of our content.

✓ There are two main components we need to build:

✓ Buttons to Click
✓ Content to appear and disappear

Adding the actions

Now let’s move on the functionality of it all. Here is the general idea of what we’re going to do. We’re going to create CSS class that disappears and reappears elements. Then we’ll use javascript to dynamically apply those classes based on an event that someone takes - like, say, clicking a button.

So let’s build out CSS classes in our Custom CSS (Design » Custom CSS) area:

  .active-tab {
  display: flex;
  }

  .non-active-tab {
  display: none;
  }

Any element with the class "active-tab" will be displayed and any element with the class "non-active-tab" will not be display. So now let’s start off by applying the "non-active-tab" to all three of our elements (Gallery Block, Text Block, Contact Block).

This is where we’ll start to use jQuery, which you can think of like a javascript plugin that helps us write javascript faster and more readable. Instead of teaching you javascript (impossible task for a blog post), I’ll just show you the code and explain it all to you.

Oh, and be sure to have jQuery installed on your website.

<script>
  $(function(){
    let galleryTab = '#block-yui_3_17_2_1_1593130006283_3499';
    let aboutTab = '#block-807fc0ac86f1abd145e6';
    let contactTab = '#block-yui_3_17_2_1_1593130006283_8276';
    
    $(aboutTab).add(contactTab).addClass('non-active-tab');
    $(galleryTab).addClass('active-tab');
  });
</script>

So first, since this is javascript, we encapsulate it all in <script> … </script> tabs style="color:red">Then we encapsulate the next part in this $(function(){ … });, this is just some code that say’s "hey, let’s wait until the entire page is loaded before we run this code." If your browser reads this script before it has loaded the contents of the page, it wouldn’t be able to find the elements!

So the let = '#block-id'; statements allows us to declare variables. Each of these are unique identifiers for each element on your website, and your block-id’s will be different from the ones I have above. So find the block-id’s of each of your elements. Then, to initiate the tabs, we get the aboutTab and contactTab and add the 'non-active-tab' class to them, and get the galleryTab and add the 'active-tab' to that.

Give that a try. The about and contact sections should disappear!

Now let’s add actions to each button.

<script>
  $(function(){
    let galleryTab = '#block-yui_3_17_2_1_1593130006283_3499';
    let aboutTab = '#block-807fc0ac86f1abd145e6';
    let contactTab = '#block-yui_3_17_2_1_1593130006283_8276';
    let galleryTabButton = '#gallery-tab';
    let aboutTabButton = '#about-tab';    
    let contactTabButton = '#contact-tab';
    
    /*Initiate the Tabs*/
    $(aboutTab).add(contactTab).addClass('non-active-tab');
    $(galleryTab).addClass('active-tab');
    
    /*Add Actions to Each Button*/    
    $(galleryTabButton).click(function(){
      $(galleryTab).addClass('active-tab').removeClass('non-active-tab');
      $(aboutTab).add(contactTab).addClass('non-active-tab').removeClass('active-tab');
    });

    $(aboutTabButton).click(function(){
      $(aboutTab).addClass('active-tab').removeClass('non-active-tab');
      $(galleryTab).add(contactTab).addClass('non-active-tab').removeClass('active-tab');
    });

    $(contactTabButton).click(function(){
      $(contactTab).addClass('active-tab').removeClass('non-active-tab');
      $(aboutTab).add(galleryTab).addClass('non-active-tab').removeClass('active-tab');
    });
  });
</script>

Now this looks like a TON more code, but really it’s the same code repeated—once for each button click. We’ve also added variables for each button using the unique id’s that we setup earlier so that the code is easier to read. So let’s just breakdown one button click, say the "gallery" button click.

<script>
  $(galleryTabButton).click(function(){
  $(galleryTab).addClass('active-tab').removeClass('non-active-tab');
  $(aboutTab).add(contactTab).addClass('non-active-tav').removeClass('active-tab');
});
  </script>

First, we set a function to run when the galleryTabButton variable is clicked. Then, within the function, we add two different actions to happen. First, we add our 'active-tab' class to the galleryTab and remove the 'non-active-tab'. Second, for the other two tabs, we do the opposite, we add the 'non-active-tab' class and remove any 'active-tab' class that might be present. We repeat this code twice, for the remaining two buttons, and just swap out the variables.

Now all of your tabs should be working! Click on the tab text to see it work.

Final step we need to take is just to design it all out. Here is some basic styling that works for me and my website, but definitely tweak it for your site. Add this to your custom CSS area

.tab-button{
  display:inline-block;
  padding:10px 25px;
  background-color:fade(black, 50%);
  color:#aaa;
  cursor:pointer;
  &:not(:first-of-type){
    margin-left:5px;
  }
  &:hover{
    background-color:black;
    color:white;
  }
}
.tab-button-group{
  display:flex;
  justify-content:center;
  text-align:center;
  border-bottom:1px solid white;
}

There’s one glaring obvious problem. There’s no way to indicate which tab is active!! So kinda need to go back a few steps, add some css for what an 'active' tab would look like, and add some actions in our jQuery that will add a css class to the active tab button and remove the class from our other tab buttons. Here is what I came up with. Read it over and see if you can follow along.

The jQuery:

  <script>                          
  $(function(){
    let galleryTab = '#block-yui_3_17_2_1_1593130006283_3499';
    let aboutTab = '#block-807fc0ac86f1abd145e6';
    let contactTab = '#block-yui_3_17_2_1_1593130006283_8276';
    let galleryTabButton = '#gallery-tab';
    let aboutTabButton = '#about-tab';    
    let contactTabButton = '#contact-tab';
    
    /*Initiate the Tabs*/
    $(aboutTab).add(contactTab).addClass('non-active-tab');
    $(galleryTab).addClass('active-tab');
    $(galleryTabButton).addClass('active-tab-button');
    
    /*Add Actions to Each Button*/    
    $(galleryTabButton).click(function(){
      $(galleryTab).addClass('active-tab').removeClass('non-active-tab');
      $(aboutTab).add(contactTab).addClass('non-active-tab').removeClass('active-tab');
      $(galleryTabButton).addClass('active-tab-button');
      $(aboutTabButton).add(contactTabButton).removeClass('active-tab-button');
      window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(aboutTabButton).click(function(){
      $(aboutTab).addClass('active-tab').removeClass('non-active-tab');
      $(galleryTab).add(contactTab).addClass('non-active-tab').removeClass('active-tab');
      $(aboutTabButton).addClass('active-tab-button');
      $(galleryTabButton).add(contactTabButton).removeClass('active-tab-button');
      window.Squarespace.initializeLayoutBlocks(Y);
    });

    $(contactTabButton).click(function(){
      $(contactTab).addClass('active-tab').removeClass('non-active-tab');
      $(aboutTab).add(galleryTab).addClass('non-active-tab').removeClass('active-tab');
      $(contactTabButton).addClass('active-tab-button');
      $(galleryTabButton).add(aboutTabButton).removeClass('active-tab-button');
      window.Squarespace.initializeLayoutBlocks(Y);
    });
  });
</script>

And the CSS with some media queries to make it mobile responsive.

.active-tab {
   display:flex;
}
.non-active-tab{
   display:none;
}
.tab-button{
  display:inline-block;
  padding:10px 25px;
  background-color:fade(black, 50%);
  color:#aaa;
  cursor:pointer;
  &:not(:first-of-type){
    margin-left:5px;
  }
  &:hover{
    background-color:black;
    color:white;
  }
  @media(max-width:767px){
        margin:5px;
  }
}
.tab-button.active-tab-button{
  color:white;
  background-color:black;

}
.tab-button-group{
  display:flex;
  justify-content:center;
  text-align:center;
  border-bottom:1px solid white;
  flex-wrap:wrap;
  @media(max-width:767px){
    justify-content:start;
  }
}

Ta-da! And we’re all done.

Be sure to check out my easy tabs plugin with a SUPER easy installation process, as many content blocks within a tab as you want, additional CSS Styles for your tabs, and extra features like tabs that stick to the top of your screen.

Keep Building,
Will

---

Free Easy Plugin

How to install the easy tabs plugin

Before you jump into installing this, know that it will only work with 2 tabs, no more. I’ve just added this here if you wish to test out this plugin before you purchase it. The paid version allows for multiple tabs and multiple tab groups per page.

Copy and paste this code into your Site Footer Code Injection area. Settings » Advanced » Code Injection » Footer Code Injection

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://assets.codepen.io/3198845/WMContentTabsFREEv2.0.js"></script>

Copy and paste this code above the content of each tab.

<div data-wm-item="tab-start">Gallery</div>

Copy and paste this code at the end of your last tab.

<div data-wm-item="tabs-end"></div>

Squarespace 7.0 Note

1. You must have AJAX Loading turned off for this code to work all the time.

---

Paid Plugin