How to create a FAQ Drop Down in Squarespace
Hey guys, in this video tutorial, I'm going to be taking you through how you can create custom if they cue drop downs, just like the ones that I have on my website here.
So they're super simple and they're a really great way to easily show a lot of content or a lot of answers to questions on your website.
For this plugin we are going to be applying the code to one FAQ page. If you want to be able to have FAQ drop downs available on every page of your website you will need to paste the Javascript code & Font Awesome Code in Settings>Advanced>Code Injection>Header and the CSS Code in Design>CSS.
Step 1: Copy and paste the Javascript code into your FAQ’s page settings
On your FAQ page, click the cogwheel for Settings, click Advanced, and then paste the code in the Code Injection. Make sure you paste the code in the Header section. This is the code that makes the FAQ function.
If you are using Squarespace 7.0 and use index pages you will need to put this code in the index page.
Step 2: Insert the CSS code
You can insert the code below underneath the previous code in your FAQ’s page settings. This is the code that styles the FAQ.
Step 3: Insert a markdown block
Where you want your FAQ’s to appear insert a markdown block on your FAQ page and copy the below question and answer format. This is the text format we use to display the questions and answers.
### Question 1?
Answer Here### Question 2?
Answer Here### Question 3?
Answer Here
Step 4: Insert Font Awesome
Copy the below code and paste it into the Header, Settings>Advanced>Code Injection>Header
This will allow for an icon at the end of your question so users know to open and close it.
If at any time you have trouble with font awesome kit or want to select your own icons you can create your own account here. https://fontawesome.com/start
Step 4: Turn Ajax Loading Off for 7.0
If you have a Squarespace website built on 7.0 you will need to turn Ajax loading off.
In the Home Menu, click Design>Site Styles, and then deselect Enable Ajax Loading.
Step 5: Save & Refresh
Click Save on your page. You may need to refresh your style editor or log out and view your website as a visitor to check if the FAQ Dropdown Accordion code is working properly.
Customisation
The code style is used with the h3 heading style, if you want to use another heading style you will need to change all the h3 in the code to the heading style you want to use.
Then change the heading style in the markdown box, you need to change the # symbol.
If you are using H1 styling use #
If you are using H2 styling use ##
If you are using H3 styling use ###
To customise even further
Look for parts of the CSS code where you can change the styling. For example, you can change the background colour, the border colour, the padding, and the border-radius.
If you want to change the FAQ arrow you will need to go into font awesome and find a free icon and copy the icon code and replace it everywhere in the CSS code.
Let’s work together
Got an amazing business idea you need help bringing to life? Time to refresh your existing brand? Ready to get serious and connect with your customers with a stunning Squarespace site?
PIN ME!
