How to add and manage an Accordion Widget on your website.
When to use an Accordion
- Accordions are used to insert content in to drop down information boxes.
- Accordions are a way to organise a page that would otherwise have lots of information, under several headings.
- They can include text, pictures, media and documents.
How to add an Accordion
- Once you have followed the instructions on Adding Content Blocks, locate your new Content Block on the Widgets page, and click on the
to enter the settings page. From there you can either click 
to start adding you first item. - Complete the fields;
- Heading: Enter the heading to be shown at the top of your accordion. This heading is clickable to drop down the content box.
- Content: Enter the content that is to go under the heading, as you would when using the Content Editor. (Note: If you require features that are not in the Content Block settings (text alignment, symbols etc), you can enter your content into the Content Editor, and copy and paste it in to the Content Block).
-
Select if you would like the Content box of the Accordion open to show the content, or closed, so that just the heading is visible, and the reader must click on the heading to drop down the content.
-
If you would like to add another Accordion, select
and follow the above steps for all further additions. -
When you have completed your entries, click Save, and you will be taken back to the Widgets page, which will show your updated Content Block.
-
Content Blocks are live on your website page as soon as you click Save. So it is a good idea to preview your page and ensure the update is correct.
-
Below is how the Accordion, shown above, will appear live on the Website. (Note: The text and colours may differ depending on the styling of your website)
- See Editing Content Blocks for more information on how to make changes to your Content Block.
Accordion Advanced Options
To edit the accordion advanced options, click the edit cog on the widget to open the accordion settings. Next click on 
to view the following:
These options affect various aspects of how the widget displays and are generally best left to someone who knows website design. The easier advanced options to edit are:
- Background Colour: use the colour picker or enter a colour hex code.
- Text Colour: use the colour picker or enter a colour hex code.
- Display Arrow: This option toggles the visibility of a display arrow for each accordion.
Click SAVE to save any changes.