Creating a FAQ dropdown/accordion text

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! 

dropdown accordion text lucia
  • 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_

Lucia Fritsche

I'm a professional marketer and specialize in web design, social media, and online marketing. Further, I help launch businesses and manage projects and products.

My passion is it to help you stand out from the rest of the online crowd. It excites me to come up with ideas and solutions, that bring your business to the next level.