How To Add An Accordion - CODA Education

Step One

To add an accordion, navigate to the page you want to edit in the admin area. Then click the blue ‘Frontend Editor’ button. This will bring you up to the Frontend Editor page, where you can see a live update of website changes that you make on the page.

Step Two

Hover over the ‘+’ box where you want to add the accordion.

Step Three

Next, click on the ‘Accordion’ option.

Step Four

An accordion will appear in live view. Hover over the Section that you wish to rename and then click on the pencil in the orange bar to edit the title.

Step Five

Now add the title you wish to add under “Title” and click “Save Changes”.

Steps 4 and 5 can be repeated for renaming each Section.

Step Six

To add content to each section click the “+” beneath the relevant section and a list of elements will display. Content can be added in the usual way (text, images etc)

To display the “+” for a alternative section, click on the relevant section you wish to add content to.

Step Seven

To add additional sections hover over the accordion until you can see the blue accordion box appear. You then need to click on the expansion arrow as indicated below.

This then displays further options. Please click on the “+” in the blue box to add more sections. These sections will appear at the bottom of the accordion.

Step Eight

In order to ensure the accordion is fully collapsed, (and no section is expanded) when the page gets published, you will need to access the accordion settings.

These can be accessed by clicking on the “pencil” icon in the blue bar.