How to Add a Multi-Layer Accordion Dropdown in Squarespace
** Updated June 13, 2023 **
Dropdown boxes (also known as Accordion boxes) can be a great way to display your FAQs on your website. In order to add an Accordion Block in Squarespace you can just click the Add Block button and choose Accordion.
However, there may be times when you want an accordion box inside of another accordion box creating a mult-layer dropdown. There is not the option to do this with the standard Accordion Block in Squarespace.
So in this video, I show you how to add a multi-layer dropdown box to your Squarespace Website using code. The code used in the video is provided below.
Step 1: Add the JQuery Library
Javascript adds functionally to your site. This Javascript code uses a specific library called JQuery. If you are already have a JQuery Library added to your code than you can skip this step, otherwise the two libraries will clash and cause some of your code to stop working.
If you do not have a line of code that looks like this… then go ahead and add it to Settings > Developer Tools > Header
<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Step 2: Add the Javascript
Copy and paste the following code into Settings > Developer Tools > Footer. This code will add the open and close actions of your dropdown boxes.
<!-- Rebecca Grace Designs Multi-Layer Dropdown Box -->
<script>
$(".dropdown h4").attr('dropdown-arrow', '+');
$(".dropdown h4").click(function() {
$(this).nextUntil("h4").slideToggle("slow", function() {
if ($('.answer').is(':visible')) {
$(this).siblings(".dropdown h4").attr('dropdown-arrow', '-');
} else {
$(".dropdown h4").attr('dropdown-arrow', '+');
}
});
});
</script>Step 3: Add the CSS
Copy and paste the following code into Design> Custom CSS. This code will add the styles to your dropdown boxes.
/* Rebecca Grace Designs Multi-Layer Dropdown Box */
.dropdown {
margin-bottom: 3vw; /*spacing between boxes */
}
.dropdown h4{
font-size: 1.2rem; /* level 1 question font size */
border-bottom: 1px solid #ddd; /* line under question */
padding:10px 0;
margin: auto 0px;
cursor: pointer;
}
.dropdown .level-2 h4{
font-size: 1rem; /* level 2 question font size */
}
.answer {
display: none;
margin-top: 1vw; /*space between question and answer */
padding-left:1vw; /*space between line and answer */
}
.dropdown h4:after{
content: attr(dropdown-arrow);
text-align:right;
float: right;
}Step 4: Add the HTML
Copy and paste the following code into a code block on your Squarespace website. This code will add the content of your dropdown boxes. You can copy this for as many boxes as you would like.
<div class="dropdown">
<h4>This is the question</h4>
<div class="answer">
<p>This is paragraph one of the answer.</p>
<div class="dropdown level-2">
<h4>This is a question within a question.</h4>
<div class="answer">
<p>This is paragraph one of the answer.</p>
<p>This is paragraph two of the answer.</p>
</div>
</div>
</div>
</div>To help ensure that your HTML is formatted correctly, you can check you code using CodePen.
Step 5: Customize
Now that you have all the code in place, it’s time to customize. Go through the HTML, Javascript, and CSS to edit the content and style of your boxes.
And voila! You now have a multi-layer dropdown box on your Squarespace Website.
