An accordion is a great way to condense data into expandable/collapsible sections.
Adding an Accordion
- Select “Accordion” as the Row Type.
- In the "Accordion" group, enter the following:
- Headline: Add a headline to your accordion
- Accordion Style: Select your desired accordion layout
- (Solid/Separate styles only) Color: Select a color for the accordion background
- Update the accordion items:
- Title: Add a title for the accordion item
- Content: Add content to the accordion
- Add new accordion items by clicking the “+” sign at the top right corner. Delete accordion items by clicking the “x” sign at the top right corner. Rearrange accordion items by dragging the items around or by using the navigation arrows.
- Click Preview Draft > Submit.
Default Bootstrap Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Solid Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Separate Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Black/White Accordion with Lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula est quam. Etiam at enim ipsum. Proin lorem dolor, eleifend sed ipsum a, imperdiet eleifend lorem. Pellentesque posuere hendrerit suscipit. Morbi sagittis dictum sem commodo congue. Curabitur interdum pretium nisi, mollis lobortis tellus dapibus ut. Donec sed urna ac enim gravida eleifend vitae a purus. Cras imperdiet ac risus at tincidunt.