Accordion Lists

The available styles menu in your WYSIWYG content editor allows you to apply an accordion effect to a bulleted list. And accordion is a javascript-based element that will display a clickable text region that, when activated, will rollout a further amount of related text.

Example:

  • Click me to see more!
  • What you're seeing here is text available once the title area is clicked. Because of the way the code is structured in the background, it remains visible to search engines and screen readers to ensure compliance with accessibility standards.
Rules for using the Accordion List style
  1. Press 'Shift+Enter' to insert line breaks between paragraphs. If you hit Enter or Return alone, it will introduce a paragraph tag and this will break the accordion.
  2. This element is for simple, regular text only. Do not add additional bulleted or numbered lists, images, media elements, or features available from the WYSIWYG's icon bars. Doing so will break the element.
  3. Bold, italic, strikethrough, links to internal or external content, anchor points, links to documents are allowed. 
  4. This feature is intended for short snippets of content preferably about a paragraph or so in length. Anything longer than that should not use the accordion list and should be added to the page in a standard way or, given the length, given a page of its own.
 Applying the Accordion List style
  1. Begin by clicking on the Insert bullet list icon: Icon image representing the option to insert a bulleted list into a web page.
  2. The first bullet represents your visible title. When this has been typed in, press your Enter/Return key to add a new bullet point.
  3. Enter the text for this entry's body region. Please refer to the rules outlined above for what types of formatting and content are permitted in this region.
  4. Testing indicates that you should avoid creating more than eight pairs of title/body entries before adding the style to avoid the system having trouble applying the style to all.
  5. When you have eight or less pairs of title/body text, highlight your list of bullet points, then use the Styles menu available from your icon bar and select the Accordion List style.
  6. Click Save to finish.