How to Add A Dropdown Box to Your Squarespace Website

* Updated September 3, 2020*

In order to provide a user friendly experience, it is important that you take the time to simplify your pages. Users will not generally read a huge block of text. They may even get frustrated trying to find the information they need and leave your website. 😟

Do you have a lot of questions on your FAQ page? A great way to simplify this page is to use dropdown boxes.

This is a Dropdown Box (click me!)

It can be a great way to simplify your FAQ pages

There is no block in Squarespace that has this feature directly. So in order to add a dropdown box you need to add in some custom code! But don’t worry, I’ll be here with you the whole way! The following video walks you through how to add a dropdown box. The code used in the video is provided below.

The following code is used in the video

Code Block

<div class="dropdown">
  <h3>This is the question</h3>
  <div class="answer">
    <p>This is paragraph one of the answer.</p>
    <p>This is paragraph two of the answer.</p>
  </div>
</div>

CSS

/* Dropdown Box */
.dropdown {
  margin-bottom: 3vw; /*spacing between boxes */
}

.dropdown h3 {
  font-size: 1.3rem; /*question font size */
  background: #000000; /*box background colour */
  color: #ffffff !important; /*question text colour*/
  padding: 10px;
  outline: #000000 solid 3px; /*outline around box*/
  outline-offset: 3px; /*spacing between box and outline*/
  margin: auto 0px;
  cursor: pointer;
}

.dropdown p {
  font-style: italic; /* answer italic */
}

.answer {
  display: none;
  margin-top: 4vw; /*space between question and answer */
  border-left: #e3e3e3 solid 1px; /*grey line beside answer */
  padding-left: 2vw; /*space between line and answer */
}

.dropdown h3:after {
  content: "\2193"; /* arrow */
  text-align: right;
  float: right;
}

Javascript

Copy and paste this in the Header

<script type="text/javascript"src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Copy and paste this in the Footer

<!-- Dropdown Box -->
<script>
  $(".dropdown h3").click(function () {
    $(this).nextUntil("h3").slideToggle("slow");
  });
</script>

PS: If you are using Squarespace 7.0, make sure you have Ajax Loading turned off or the dropdown box will only work when the page is refreshed.

Here are some other posts you may like:

• How To Add A Colour Gradient To Your Squarespace Website

• How to Use Anchor Links to Jump to a Specific Spot on a Page

• Adding a 4th Heading Style to Your Squarespace Website