Accordions Widget

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, and complete the fields;
    • Custom Class: This field can be left blank.
    • Background Colour: Choose your background colour for the drop down box of your Accordions, by clicking the white square and selecting a colour. The default is white.
    • Display Arrow: Select whether to show an arrow at the top right of your accordion headings.
  • If you need to expand the editor page, you can click and drag the bottom corner to increase the size.
  • Select  to add the first heading, and accordion content.

  • 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.