•   Email
  •   Print
Component Library

Accordion

The accordion component generates content in a "hide/show" fashion. Accordions are a very common user interface (UI) trend that allows a site visitor to show content on demand. It allows authors to show more content in a smaller space. Here is an example of the content generated by the accordion component.

Example

Click on each accordion title to show its content. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 

Malesuada Ullamcorper Lorem

Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.

Author Dialog

The author dialog for this component allows for the addition of one or more titles. For each title, an accordion pane is created with a blank paragraph system  in which any other component can be added. This is done so that multiple types of content can be added to an accordion content pane. 

  • Click "Add Item" to add a new title and its corresponding blank paragraph system.
  • Use the arrows to reorder the accordion content panes. This order is reflected on the content when it is output by the component.
  • The red circle removes an accordion title/content pane.
This is an example of the content output of the component. The dotted lines beneath each title represent a blank paragraph system.