Accordion Set

An accordion menu is a vertically stacked list of headers that can be clicked to either reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner.

See an example of this content type

Adding an Accordion Set

  • From the paragraph builder select the button labeled Add Accordion Set

  • Enter the heading for the Accordion Set in the Title field.

  • Under Title Options, select whether the Title should be aligned left, centered, or visually hidden. The default is left-aligned.

  • Use the Add Background checkbox to add a light gray background to the accordion headings. Deselect the checkbox to remove the background.

  • Use the Auto Close checkbox to specify whether other accordions will automatically close when a new one is expanded.

  • The Print checkbox adds a print button to each accordion in a set, enabling the user to print a single accordion. A new checkbox on the accordion set enables this on a set-per-set basis.

Click on this link to view a more detailed example of the accordion print feature.

  • The Behavior selector controls how this accordion will initially appear. All Closed begins with all accordion panels collapsed. First Open will load the page with the first accordion opened. Always Open will have all panels opened on the page load.

  • Use the Horizonal Border selector to add a border to the top, bottom, or both the top and bottom of the accordion set.

  • Use the Description field to enter your content description for the accordion. This is a regular text field that, if used, will display beneath the paragraph title and above the accordions. The description field should help you create faster and more efficient content since you no longer need to add a PB text bundle above the accordion.

Click on this link to view a more detailed example of the accordion description feature.

Adding an Individual Accordion

  • In the Accordion Builder section, select Add Individual Accordion.

  • Enter the accordion heading in the Header field.

  • Add content to the Body field.

Click on this link for more information on how to add content to the Body field using CKEditor 5.

Â