The Accordion tool visually condenses and divides content by displaying headings that can be expanded for more details.

🖼️ Examples

Here's some examples of how you can configure the Accordion tool:

Lorem ipsum dolor sit amet, ei cum doctus omittantur. Tale dolores platonem ne mel. Mel vocent assueverit ut. Id nonumy minimum conclusionemque sed. Pri alia delenit te, per exerci docendi te, case molestiae vel eu. Id case solet nec.

Nonumes atomorum ex cum, sed eu enim oportere definitionem. Facer scribentur eos eu, elitr decore cum et, ocurreret theophrastus vix ei. In vel animal intellegam, doming hendrerit ne vis, qui tempor delicata expetendis ea. Id stet nonumes his.

⚙️Settings

Settings you can configure in the tool:

Basic

  • Add item - add or edit the items to be displayed. When adding an item, the following attributes can be added/edited :
    • Title - Sets a title that will be displayed
    • Content - allows you to add simple text and provides common word-processing tasks to manage and format your text. It can also be used to add hyperlinks to other pages in your site, external websites, and documents.

Display

  • Margins - adds padding around the Accordion

Advanced

  • Block Title - sets an optional title for the Block
  • Block Description - sets an optional description for the Block that will appear below the Block Title.

🎯 Key Actions

Key actions you can perform in the Accordion tool:

  • Under the Basic tab, select Add Item.
  • The Add Item window will display.
  • Add a title and your content.
  • Once complete, select the blue Save button and repeat as necessary.
  • Use the blue up/down arrows on the right hand side of each item to move accordion up or down by one spot.
  • Alternatively, click and hold the three lines (or hamburger) icon on the left hand side of the accordion and drag it to another position in the list.
  • Once complete, select the blue Save button.

Practice tips

  • While accordions can accommodate most html/rich text elements, tables inserted into an accordion will not display properly.
  • An accordion can be a great way to condense information, but do not make your accordion lists too long - consider using sub-pages with feature grids in cases where you have a great deal of information and/or media to display.
SPP Hack - Embed video in the accordion tool