Using accordions in WYSIWYG editor

Accordions help users see only the content they need. Accordions expand and collapse sections of content with a title. The Accordion enables you to save screen space, focus attention and have more content available instantly with only one click.

Adding an accordion

  • Create a new piece of content or edit an existing piece of content.
  • Within the WYSIWYG editor click on the accordion function
  • This will insert two accordions into your content. 

Titles and content text

For each accordion you will need to add:

  • a title and
  • the corresponding content

To add your title click in the box where it says Accordion title 1, delete that text and replace with your own title.

To add your accordion content click in the box where it says Accordion content 1, delete the current text and replace with your own content.

You have all the functionality available to you which is in the current WYSIWYG so you will be able to add links and format your text in the normal way.

Repeat this for the second accordion on the page.

Add an additional accordion

To add more accordion tabs (titles and content)

  • right-click at the bottom of your second accordion

This will then give you the option to:

  • Add accordion tab before
  • Add accordion tab after
  • Remove accordion tab

You can continue to add as many accordions as you need to the page.

Delete an accordion

If you want to delete accordion to your page, right click on the accordion you want to delete. 

This will then give you the option to:

  • Add accordion tab before
  • Add accordion tab after
  • Remove accordion tab

Select ‘Remove accordion tab’ to delete the accordion.

Once you have finished creating your content, save, submit or publish in the normal way.