Add a Dropdown Box

What does this code do?

These code snippets will allow you to add a series of dropdown or accordian style boxes on your Squarespace website.

Design 1

When clicked…

Design 2

When clicked…

Video Tutorial

Want to skip ahead?

Design 1 - 0:00

Design 2 - 6:12

Add a Link - 10:29

Design 1

Code Block

Copy and paste the following into a Code Block on your website where you would like the dropdown box to be. You can duplicate this code multiple times into the same code block to add more dropdown boxes.

<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>

Customize by editing the black text to include the questions/answers you would like to display.

Custom CSS

Copy and paste the following code into Design > Custom 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;
}

Customize the spacing and colours.

You can also change the arrow by substituting “\2193” for other html Dec Numbers or other text. You can find a list of other arrows at https://www.w3schools.com/charsets/ref_utf_arrows.asp

Code Injection

Copy and paste the following into Settings > Advanced > Code Injection > Header.

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

Copy and paste the following into Settings > Advanced > Code Injection > Footer

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

Design 2

Code Block

Copy and paste the following into a Code Block on your website where you would like the dropdown box to be. You can duplicate this code multiple times into the same code block to add more dropdown boxes.

<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>

Customize by editing the black text to include the questions/answers you would like to display.

Custom CSS

Copy and paste the following code into Design > Custom CSS.

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

.dropdown h3{
  font-size: 1.3rem; /*question font size */
  border-bottom: 1px solid #000; /* line under question */
  padding: 10px;
  margin: auto 0px;
  cursor: pointer;
}

.answer {
  display: none;
  margin-top: 4vw; /*space between question and answer */
  padding-left: 2vw; /*space between line and answer */
}

.dropdown h3:after{
  content: attr(dropdown-arrow);
  text-align:right; 
  float: right;
}

Customize the spacing and colours.

Code Injection

Copy and paste the following into Settings > Advanced > Code Injection > Header.

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

Copy and paste the following into Settings > Advanced > Code Injection > Footer

<!-- Dropdown Box -->
<script>
  $(".dropdown h3").attr('dropdown-arrow', '+');
  $(".dropdown h3").click(function() {
    $(this).nextUntil("h3").slideToggle("slow", function() {
      if ($('.answer').is(':visible')) {
        $(this).siblings(".dropdown h3").attr('dropdown-arrow', '-');
      } else {
        $(".dropdown h3").attr('dropdown-arrow', '+');
      }
    });
  });
</script>

Bonus Tip: How to use a link in the dropdown box

Copy and paste the following in place of one of the <p></p> tags in the code block. Then change the # to the url you would like the link to take them to.

<p>You can find out more information <a href="#" target="_blank">here</a>.</p>

How To Use It

1. Copy and paste the code snippets as indicated above.

2. Customize the text in the code block to include the questions and answers you would like to display.

3. Customize the spacing and colours in the CSS code to style the dropdown as you would like.