Creating a FAQ accordion

-> works for version 7.0 and 7.1.

For my FAQ I wanted to create a drop-down text so that the question is visible and the answer only if you click on it. Unfortunately, this is not a standardized function in Squarespace. Nevertheless, there is a solution to this problem, yay! 

• Step 1
  On the page, you want to insert the FAQ or accordion insert the MARKDOWN block and start writing your Questions and answers as shown below. The # hashtag indicts the size of the question, so the more you have the smaller the font. This depends on the size you want your FAQ to look and feel like. 

  #### What happens if I am late?

  You will only be able to join what remains of your time booked.

  
  #### Can adults join the kids on the trampolines?

  Of course! Our facilities are for people of all ages.
  
   

• Step 2
  Go into your SETTINGS - ADVANCED - CODE INJECTION - and add the following code to the Header and click save:

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

• Step 3
  Add the following code into the actual page under ADVANCED and save it:

  <script>
  $(document).ready(function(){
  $('.markdown-block .sqs-block-content h4').addClass('ui-closed').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h4").nextUntil("h4").slideToggle();
  $(".markdown-block .sqs-block-content h4").click(function() {

  $(this).nextUntil("h4").slideToggle();
  $(this).toggleClass('ui-closed ui-open');
  });
  });
  </script>

• Step 4
  The last thing that you need to do is to add some CSS code which you will find under DESIGN - CUSTOM CSS:

.markdown-block p {
margin-left:1.5em;
}
.markdown-block .ui-closed:before {
font-family:monospace;
content:"+ ";
}

.markdown-block .ui-open:before {
font-family:monospace;
content:"- ";
}

Done! A very easy and hopefully logical solution to create an accordion text. Let me know if you have any issues and make sure to share your feeling of achievement with me =)

Lucia_