Creating an accordion style section

Accordion style sections can be added to your page. These sections are often used for a FAQ section on a website but can be used for many different reasons.

Step 1 - Create sections

Add two Sections to your page. If you're creating this for a FAQ section, name the first section 'Question' and the second one 'Answer'. You can do this by double-clicking on the section in the sections tab or by clicking on the properties box at the top right-hand corner of the section.

accordion - image 1

Add your text to each section. For example, your question in the first and the answer in the second.

accordion - image 2

Step 2 - Add icon

If you would like an icon to link to the drop-down section, you can find an icon on websites such as thenounproject.com. Download your icon. For example, you could get an arrow pointing down.

Add this icon as an image onto your page and place in the first section.

accordion - image 3

Step 3 - Add link

Add a link to your icon and/or your text in the first section. You can do this by clicking on the icon/text and clicking on the links tab. Link it to 'Hide/Show Section' and 'answer' or the name of the second section.

accordion - image 4

Step 4 - Make section invisible

Go into the sections tab on the left of your canvas and click the eye icon next to the second section. This will make it in invisible until the text/icon in the first section has been clicked.

accordion - image 5

For multiple sections of this type, you can duplicate the sections to avoid re-adding the icon, text, etc.

Once you have finished working on your accordion section, click 'publish' to view your changes.

All Tutorials

Contact Support

Need to request some yearly updates? Send an enquiry through the form on the right, detailing the edits you require.


For assistance logging in, or any other enquires, please call Customer Care on 1300 691 912.

Send a Request