Follow

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. 

Creating_an_accordian_style_section-01.png

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

Creating_an_accordian_style_section-02.png

Step 2 - Add icon 

If you would like an icon to link to the drop-down section, you can choose from our icons by clicking on the icon tab on the left of the canvas. You can also upload your own icon image. 

Add this icon to your page and place it in the first section. 

Creating_an_accordian_style_section-03.png

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. 

Creating_an_accordian_style_section-04.png

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 invisible until the text/icon in the first section has been clicked. 

Creating_an_accordian_style_section-05.png

 

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. 

 

 

Comments

Powered by Zendesk