Accordion

Use the Accordion content items to build accordions on your site

This article covers: 

Accordion & Accordion Item content items

Accordions are built with two content items: 

  • Accordion: the parent content item where you configure settings that apply to all of the accordion panels within the accordion
  • Accordion Item: accordion items are the only content item you can add inside of accordion. Each accordion item represents on item within the accordion, and you can nest content within each one.  

Templates

To access examples of accordions, or to use them out of the box, you can search for "Accordion" in the Nyla templates library: 

Fields

Accordion:

  • Allow multiple open panels: if this is switched on, you can have multiple accordion panels open at the same time. If it is off then opening one accordion panel will close any that are already open. 

Accordion Item:

  • Title: Sets the text in the accordion panel title.
  • Open by default: Sets an accordion item to be open by default when somebody lands on that page. 
  • Title open and close style: Sets the CTA design token that displays for the accordion panel title when either opened or closed.

Elements

The accordion content item has the following elements: 

  • Titles: set text alignment for the panel titles.
  • Icons: configure the icons for all accordion panels, for example the icon positioning and icons for whether the accordion panel is open or closed.
  • Dividers: configure divider styling and placement above and below the accordion

Link Actions

The CLOSE_ACCORDION_ITEM link action enables you to close the parent accordion item. See link action here.