Website Building » Squarespace » How Do I Add a Tab in Squarespace?

How Do I Add a Tab in Squarespace?

Last updated on December 28, 2022 @ 7:32 pm

There are two ways to add a tab in Squarespace. The first is to use the Tab Block, which can be found in the Block Menu.

The second is to use HTML.

To use the Tab Block, simply drag and drop it into your content area. Then, click on the tab to open the editing panel. From here, you can add your tab content and style it however you like.

To use HTML, you will need to add the following code to your page:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">Tab1</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">Tab2</button>
<div id="Tab1" class="tabcontent">
Tab1 content goes here.
</div>
<div id="Tab2" class="tabcontent">
Tab2 content goes here.
</div>

<script type="text/javascript">

 function openTab(evt, Name) {

     var i, tabcontent, tablinks;

     tabcontent = document.getElementsByClassName("tabcontent");

     for (i = 0; i < tabcontent.length; i++) {

         tabcontent[i].style.display = "none";

     }

     tablinks = document.getElementsByClassName("tablinks");

     for (i = 0; i < tablinks.length; i++) {

         tablinks[i].className = tablinks[i].className.replace(" active", "");

     document.getElementById(Name).display = "block";

     evt.currentTarget.className += " active";
 } </script>
PRO TIP: If you are not careful, adding a tab in Squarespace can mess up your whole site! Make sure you know what you are doing before you add a tab, or you could end up with a big mess on your hands.
Madison Geldart

Madison Geldart

Cloud infrastructure engineer and tech mess solver.