How to Make an FAQ Accordion in Squarespace

Here is the script you'll need:

This one goes in the site wide code injection (footer) - 'Settings > Advanced > Code Injection > Footer':

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
 this.classList.toggle("active");
 var panel = this.nextElementSibling;
 if (panel.style.display === "block") {
   panel.style.display = "none";
 } else {
   panel.style.display = "block";
 }
});
}
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
 this.classList.toggle("active");
 var panel = this.nextElementSibling;
 if (panel.style.maxHeight) {
   panel.style.maxHeight = null;
 } else {
   panel.style.maxHeight = panel.scrollHeight + "px";
 }
});
}
</script>

Then you'll need to add this in a Code Block on the page where you would like your FAQ accordion to appear:

<button class="accordion">QUESTION HERE</button>
<div class="panel">
<p>ANSWER HERE</p>
</div>

Lastly place the CSS in the Custom CSS section 'Design > Custom CSS'

.accordion {
background-color: #525252;
color: #fff;
border: solid 1px #fff;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
transition: 0.4s;
}

.accordion:hover {
background-color: #ccc;
}

.panel {
padding: 0 20px;
background-color: #fff;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}

Opening links in a new tab

As I mentioned in the video, you might want to open links in the answer in a new tab. To do that we'll add target="_blank" after the link within the <a> tags like so:

<a href="YOURLINK" target=_blank">Your link text here!</a>

Further Customising the button's hover state

As also I mentioned in the video you can change the font colour and a few other bits and pieces of the button on hover with this:

.accordion:hover {
background-color: #bababa;
color: crimson;
font-weight: 900;
font-style: italic;
padding: 18px;
text-decoration: line-through;
}

Try changing the font weight, colour and sizing.

You'll find more info on CSS and text at w3 Schools

Subscribe for more Squarespace tips & tricks!