How To Create A Drop Down FAQ Section In Showit

This one took me a WHILE to figure out, but once you get it, adding a drop down FAQ/ accordion to your Showit website is a nice feature!

1. Create a Question and Answer canvas

A proper FAQ setup would involve a separate canvas for each question, as well as answer. This way, the answer can pop up right underneath the question canvas. So each ‘set’ of FAQs would require 2 canvases. A question canvas with 2 canvas views, and an answer canvas that is hidden to start.

2. Set up view 2

Once you have your View 1 and View 2 (which are on the same canvas and are a copy of one another except view 2 has an arrow up and view 1 has an arrow down), you create a click action with the arrow DOWN to show view 2 and a click action with the arrow UP to show view 1.

3. Set up click actions

In the click action that leads to view 2 of the Question canvas, you’ll setup and additional action within that click action that is set to Show Canvas>Answer Canvas. This is what will show the answer when clicked.

4. Repeat

What you want to do next is essentially make small stacked canvases so it would go:

Q1 –> canvas with 2 views / views are exactly same except up & down arrow
A1 –> Hidden to start canvas with the answer to Q1 that shows when the arrow is clicked.
Q2
A2
Q3

so on and so forth…that makes it a really clean accordion experience where when the hidden answer canvas shows, it pushes the other questions below it down vs any overlap or anything like that.

Below is a bit of an outline on the screenshot, with the red lines representing Q canvasses and the blue lines representing A canvases and how they would be stacked up in that area. Here is more info about hidden canvases.

Troubleshooting

WHY DO YOU NEED SEPARATE CANVASES FOR THE QUESTION AND ANSWER?!

At first I just put the answer in View 2 (on the same canvas) which looks fine on desktop, but has too much spacing on mobile. This was an issue…

The canvas view height needs to be consistent for all views within a canvas, otherwise you may run into issues on mobile. That’s why it is best to have a separate canvas for answers.

Have any questions? I know this can be confusing so feel free to comment below!

website bootcamp workbook

Was this blog helpful?

PIN IT to share the love with others!

Leave a Reply

Your email address will not be published. Required fields are marked *

Instagram is kind of my thing!
Let's connect!
@rebekahreadcreative

pair beautiful brand design with an intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs

Home

Read The Blog

Contact Bekah

back to top

How to design a website that converts! learn my best tricks to seo, copywriting + branding!

Let's connect!

I WANT THAT!