How to create a collapsible FAQ section (accordion)

28 Jul 2021

Axel Kee

This post contains instruction on how to use the code generated from the Collapsible Accordion Generator

After inputting the title and contents for the accordions section, click “Get HTML Code”, and click “Copy Code”.

Copy Code

Next, go to the edit product page, or edit pages/blog content page, and click the “< >” button on the top right of the editor to show HTML.

Show HTML

Next, paste in the code you copied earlier to the bottom of the editor :

Paste code

Click “Save” at the top to save your product description / page / blog post content, and now when you view the product, it will show the accordion :

Demo

If you want to remove the accordion code in the future, you can click the show HTML button (“< >”) in the product / page / blog post editor, and find the code below and remove them :

<!-- start yagi accordion -->
...
...
<!-- end yagi accordion -->