Welcome!
Today we’ll be going over how to create a smooth accordion-style FAQ Section. This is pretty regular around the internet in almost every industry so it’s only right that you have one for your website as well!
If you ever need more help with topics not covered in my Tips & Tricks you can contact us at Atmospheric Thinking for help getting your vision online!
Step 1
Go to whatever page you want the FAQ area on and add a Code Block. This is one of the options in the More section when looking for blocks to add. You can put this Code Block wherever you want but it needs to be on the same page as where you’ll be putting the FAQ.
Step 2
Copy and Paster this snippet into the code block:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
});
</script>Step 3
You’re now going to go back to the page and add a Markdown Block wherever you’re wanting the FAQ at. The Markdown Block is one of the first options in the Basic section of the new blocks.
Step 4
Copy and Paste this text into the Markdown Block text area:
### + Question 1?
Answer Here
### + Question 2?
Answer Here
### + Question 3?
Answer HereNow click Apply and KABOOM! You have a beautiful FAQ accordion style section!
Now, the final text you added was purely for example purposes but now we can break it down and create your own questions! All you have to do is go back to the edit area of the markdown block and switch out the Question text with your question (without changing the ### + part) and change the Answer text with your answer.
With the code we offered it’s important to know that your Question will be in whatever format your Heading 2 is in and your answer will be in Heading 3.
I hope this post was helpful for a lot of you and I look forward to seeing you for tomorrows addition of Tips & Tricks but until then,
Have a great day, be safe, and stay healthy!
