Accordion Dropdowns in Squarespace

Article

So you want to build some accordion dropdowns on your Squarespace site. Maybe for FAQ’s or maybe just for other general information. In this tutorial, I’m going to go over how to build a basic dropdown block.

I’ve also built a plugin that you can purchase (click the purchase tab) that allows you to build accordion sections really easily as well as use just regular Squarespace blocks within an accordion dropdown instead of coding everything.

TLDR: if you want a really easy way to add accordion blocks to your site, check out my super affordable plugin. If you want to learn more about coding accordion blocks using HTML, CSS, and Javascript, keep reading.

Step 1: The general structure

Generally, this is what we want to do. We want to create our HTML accordion block that has 2 child elements. 1) the title 2) the content that shows up. The title is what we click on that displays or hides the content of the accordion.

In our example above, the .accordion-block element has a blue border, the .accordion-title element has a red border, and the .accordion-panel element has a green border. The .accordion-block element is the parent of the other two elements, which is why it surrounds them.

Step 2 - CSS Part 1: Basic Formatting

Now let’s add some CSS to our elements. We’re just going to add some simple styling to the title plus adding a "+" icon and changing the cursor on hover to indicate that this is an element that can be manipulated.

.accordion-title{
  font-weight:700;
  color:#777;
  border-bottom:1px solid #777;
}
.accordion-title:before{
  content:"+";
  margin-right:17px;
}
.accordion-title:hover{
  cursor:pointer;
  color:#000;
}

Step 3 - Javascript Part 1: Creating the Click Event

First we want to use jQuery, instead of vanilla javascript, because it’s easier to read and build. So let’s add the minified install of the latest version of jQuery to our Page Settings » Advanced » Code Injection area. As of the writing of this article it looks like pasting this in:

  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">  </script>

Now that jQuery is installed, let’s write our code to create a click event to trigger when we click on the .accordion-title element from our HTML above.

  <script>
  $(function(){
    $('.accordion-title').on('click', function(){
      $('.accordion-panel').toggleClass('active-accordion');
    })
  });
  </script>

This code is saying that when we click on an element with a class of .accordion-title then let’s toggle a class on the .accordion-panel element called .active-accordion. The toggleClass function basically means “add the class if it’s not there or remove the class if it is there”. Now we can just add some CSS styles to display or hide the .accordion-panel‘s.

Step 4 - CSS Part 2: Layout Formatting

Ok, in this part we want to show and hide the .accordion-panel element. By default (meaning, when the page initially loads the first time), we don’t the contents of the accordion panel showing, so let’s make that the default CSS.

.accordion-panel{
  display:none;
}

Then, since we’re toggling on and off a class called .active-accordion on the element .accordion-panel, we can add the following CSS that will override the CSS we just added that removes the .accordion-panel element.

.accordion-panel.active-accordion{
  display:block;
}

Notice that there is not a space between the selectors here because both of these classes are on the same element. Now the dropdown accordion works for this one element. Great! But we’re not done yet…

Step 5 - JS Part 2: Selective Events

What if we want to add multiple Accordion Dropdowns? Our code wont’ work because it’s too generic. The javascript we wrote earlier applies to EVERY element with a class of .accordion-title, so anytime we click on an element with a class of .accordion-title EVERY element with a class of .accordion-panel will be toggled. This won’t work because we just want the panel of the corresponding title to open up.

The way we solve this is by being a little more selective in our Javascript. Let’s add a unique selector in our HTML to each .accordion-block like, id="accordion-1". Make the value between the quotes whatever you want, as long as it’s unique to the HTML of the page.

Now, we can select first the accordion-block by it’s id, #accordion-1, then we can select the .accordion-title and .accordion-panel within that unique id. The resulting Javascript is as follows:

  <script>
  $(function(){
    $('#accordion-1 .accordion-title').on('click', function(){
      $('#accordion-1 .accordion-panel').toggleClass('active-accordion');
    })
  });
  </script>

And that’s it! I hope that helps you understand this process a little more. Write a comment if you have any questions or if you just want to share some love.

Hope this helped!

Will

The Code

Add in a Code Block. Replace the id="accordion-1" with a unique value (just replace the number) for each accordion item on a page.

HTML

  <div class="accordion-block" id="accordion-1">
    <div class="accordion-title">
    FAQ #1
    </div>
    <div class="accordion-panel">
    Nostrud proident ea dolore sunt. Duis deserunt commodo amet est laboris do non velit duis laborum voluptate est ea. Sint deserunt veniam ea et eiusmod velit. Irure incididunt aliquip tempor velit. Sint consectetur dolor exercitation amet laborum est id adipisicing magna fugiat officia non id.
    </div>
  </div>

CSS

Add this CSS to your Design » Custom CSS area:

.accordion-title{
  font-weight:700;
  color:#777;
  border-bottom:1px solid #777;
}
.accordion-title:before{
  content:"+";
  margin-right:17px;
}
.accordion-title:hover{
  cursor:pointer;
  color:#000;
}
.accordion-panel{
  display:none;
}
.accordion-panel.active-accordion{
  display:block;
}

Javascript

Make sure you add a new function() for each accrdion dropdown, updating the selector id accordingly.

  <script>
  $(function(){
    $('#accordion-1 .accordion-title').on('click', function(){
      $('#accordion-1 .accordion-panel').toggleClass('active-accordion');
    })
  });
  </script>

Accordion Plugin

Accordion Dropdown Pro

$25.00

See Demo

Easily add accordions to your Squarespace website and adjust them to your liking with many customizable components. Add an accordion to your product details as well (like below!)

Purchase