Content Row: Accordion

The Accordion setting provides for content that consists of a set of headings and a display arrow to toggle whether the interior content is displayed or not. Here is how it looks on a page:

accordion example

Accordion content form:

accordion form

You may have one or more Accordion Tabs. Each one of which has a field for the Heading and a WYSIWYG editor that allows the addition and formatting of content including text, images, video and external links.  Note that the Section Heading field is blank in this example.  

The section heading will be an <h1>.  The accordion heading will be <h2>.

If you mouse over the right side of the Accordion Tab field, you can view options to add or delete Tabs or to change their order.  The plus (+) adds a new Accordion Tab.  The (x) removes the current Accordion Tab.  The arrows rearrange order of the Accordion Tabs.

Note: The first accordion item will be open by default.  Keep this in mind when planning out your content.  It is a good idea to place smaller amounts of content in the first accordion so that the other accordion items easily show within the initial viewing area.

 

Example accordion list Section Heading <h1>

Heading of Accordion Tab 1

Details within accordion content area one. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel magna sed ex luctus convallis. Donec eget auctor ex. Curabitur quis tincidunt nisi, luctus placerat lorem. Fusce consectetur purus felis, eu venenatis nulla finibus id. Fusce accumsan nec orci a lobortis. Fusce vulputate nisl in velit molestie faucibus. Ut vel semper ante. Suspendisse ullamcorper non tellus eget varius. Vivamus tincidunt leo felis, et accumsan augue tristique ut. Morbi aliquet, orci ut tincidunt lacinia, tortor massa tempor neque, convallis varius eros arcu ac ex. In hac habitasse platea dictumst. Donec pulvinar mattis dui commodo bibendum. Duis eu diam vel dolor rutrum blandit. Cras malesuada odio turpis, a posuere leo commodo sed. Vestibulum consequat, enim id dignissim mattis, augue nulla lacinia dolor, et auctor ipsum massa fringilla urna.

Heading of Accordion Tab 2

Details within accordion content area two. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel magna sed ex luctus convallis. Donec eget auctor ex. Curabitur quis tincidunt nisi, luctus placerat lorem. Fusce consectetur purus felis, eu venenatis nulla finibus id. Fusce accumsan nec orci a lobortis. Fusce vulputate nisl in velit molestie faucibus. Ut vel semper ante. Suspendisse ullamcorper non tellus eget varius. Vivamus tincidunt leo felis, et accumsan augue tristique ut. Morbi aliquet, orci ut tincidunt lacinia, tortor massa tempor neque, convallis varius eros arcu ac ex. In hac habitasse platea dictumst. Donec pulvinar mattis dui commodo bibendum. Duis eu diam vel dolor rutrum blandit. Cras malesuada odio turpis, a posuere leo commodo sed. Vestibulum consequat, enim id dignissim mattis, augue nulla lacinia dolor, et auctor ipsum massa fringilla urna.