Toggle Button for Content – Hide & Show Sections

If you are looking to add a toggle button to hide and show content sections that are on a page, below is a tutorial and example you can use.

  1. Add a new page to your Squarespace website that will contain toggle buttons.
  2. Add a Code block to the page, then add the code from the example below. The code will be for the buttons and jQuery script to hide & show the content sections.
  3. Click the gear icon for your toggle button page to access the settings of your page, then click the Advanced tab. Add the code from the example below. The code will be for the look & feel of the buttons along with the main jQuery foundation URL.
  4. In this example, I am pulling in two different Blogs – tutorials & testimonials. You can use a similar approach using two different blogs OR any other two pieces of content. ADD the two sections you want to use the toggle buttons for.
  5. Right-click on the webpage and choose “View Frame Source” (if you are in Edit mode of your Squarespace website).
  6. Look for the “block-id” sections for both content sections you added to the page and replace the example block IDs I have in the Step 2 Code Example below.

Note: The sections you want to hide/show must be on the same page as the toggle buttons. They content can’t be located on a different page.

Step 2 Code Example

<div class="button-section">
<button class="button-single button-left">Tutorials</button>
<button class="button-single button-right">Testimonials</button>
</div>

<script>
$('.button-left').ready(function() {
    $('#block-yui_3_17_2_1_1550073153527_3727').show();
    $('#block-yui_3_17_2_1_1550073153527_6185').hide();
  $(".button-left").css({"background-color": "black", "color": "white"});
   $(".button-right").css({"background-color": "#e9e9e9", "color": "#a9a9a9"});
});
    
$('.button-left').click(function() {
    $('#block-yui_3_17_2_1_1550073153527_3727').show(500);
    $('#block-yui_3_17_2_1_1550073153527_6185').hide(500);
  $(".button-left").css({"background-color": "black", "color": "white"});
   $(".button-right").css({"background-color": "#e9e9e9", "color": "#a9a9a9"});
});
$('.button-right').click(function() {
    $('#block-yui_3_17_2_1_1550073153527_6185').show(500);
    $('#block-yui_3_17_2_1_1550073153527_3727').hide(500);
      $(".button-left").css({"background-color": "#e9e9e9", "color": "#a9a9a9"});
    $(".button-right").css({"background-color": "black", "color": "white"});
});
</script>

Step 3 Code Example

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

<style>
.button-section{text-align:center;border-radius:6px;width:350px;display:flex;flex-flow:row wrap;align-items:center;margin:auto;box-sizing:border-box;padding-bottom:35px}

.button-single{text-transform:uppercase;font-size:.7em;text-align:center;letter-spacing:.2em;vertical-align:middle;box-sizing:border-box;width:50%}

.button-left{border-top-left-radius:10px 10px;border-bottom-left-radius:10px 10px}

.button-right{border-top-right-radius:10px 10px;border-bottom-right-radius:10px 10px}
</style>