Adding an accordion on a page

An accordion shows a list of headings that visitors can click to open and close. It is ideal for FAQs, opening hours, policies or any content that would otherwise make a page very long.

In Zenario you build an accordion with a nest. Each slide in the nest becomes one accordion panel: the slide's title is the clickable heading, and the plugins on the slide are the content that opens underneath.

Start by inserting a nest on the page. Then set it to display as an accordion, and add one slide per panel.

Inserting a nest on the page

1. Select the "Tools" mode on the Admin Toolbar.
   
   
   
   
2. Click on the icon to Show mobile and empty slots.
   
   
   
   
3. In the page, find an empty slot where you want the accordion to appear, and select "Insert..".
   If prompted, make a draft.
   
   
   
   
4. Choose Insert a Nest from the list, and click the 'Continue' button.
   
   
   
   
5. Click '+ Create a new nest' button and select 'Nest'. 
   
   
   
   
6. Enter a Nest name for it, for example "FAQ accordion". For the Type of nest select Accordion.
   
   
   
   
7. On the Accordion tab, choose whether the first panel should be open when the page loads, or whether all panels start closed.
   
   
   
   
8. Click the "Save" button.
9. Click the "Insert nest" button.

Adding panels to the accordion

Each slide in the nest is one panel of the accordion.

1. Hover over the nest on the page and open its menu. Select Add plugins to this nest to manage its slides and plugins.
   
   
   
   
2. Edit the 'Slide 1' by clicking the "Edit slide properties" button.
   
   
   
   
3. Enter the Slide label. This is the heading visitors will click, so keep it short and clear, for example: 'How are artworks packaged and delivered?'. Then click the "Save" button.
   
   
   
   
4. Add a plugin to the slide to hold the panel's content, such as a WYSIWYG editor or Banner plugin, and enter the text.
   
   
   
   
   
   
   
   Note: You can put more than one plugin on a slide, for example a WYSIWYG editor and a Banner plugin.
   
   
5. To add the next slide, click "+ Add slide" and repeat steps 2 to 4 for each panel.
   
   
   
   
6. To change the order of the panels, drag the slides into the order you want.
7. Close the nest editor to return to the page.