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!
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.
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.
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.
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.
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.
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!
Was this blog helpful?
PIN IT to share the love with others!