Accordions Paragraph
This paragraph component is a great way organize long text in a clean layout. It uses an accordion style with a click-to-open feature that makes content easier to browse and saves space.
- Help users find information quickly with click-to-open sections.
- Save space on a page without hiding important details.
- Break up large blocks of information for better readability.
- Use to organize information such as FAQs, steps, lists, agendas, publications, research information, etc.
- Add style.
- Can be used outside and inside of a group.
- Can be used in both normal and narrow groups.
- Works best to be placed anywhere after the teaser and before the directory.
- Use a title to introduce or offset the section.
- Include a description, optionally featuring a main link within it.
- Create multiple accordions within the same paragraph.
- Choose the alignment: centered, left or right.
- Note: Center alignment works best inside a narrow group. Right alignment is best for a normal group without a title (add the title separately as a regular Text paragraph with H2 for the best look).
- Choose margin settings: none or default
- This controls the spacing above the Accordions items in relation to any element above.
Default: The expected spacing to keep consistent between other Paragraph elements.
None: Spacing above will be removed entirely.
- This controls the spacing above the Accordions items in relation to any element above.
- Inside a group, the background is white. Outside, it is bone color.
How to Add - Accordions Paragraph Component
- Log into Drupal.
- Go to page you wish to edit.
- Click on + sign to enter a new paragraph inside or outside of a group.
- Choose Accordions paragraph.
- Complete the form details.
- Choose Alignment: Required
- Choose Margin Setting: Required
- Title: Optional
- Description: Optional
- Featured Image: Required per accessibility
- Call To Action Link: Optional
- Add your Accordion Items.
- Accordion Title: Required
- The title of the Accordion Item that the user clicks on to expand the rest of the text.
- Accordion Description: Required
- Accordion Title: Required
- Click Save before exiting the paragraph.
- Save page as "In progress" or "Ready to Review."
- Centered, inside group:
- Right aligned and left aligned on one page:
- **Generally, we aren't using the title with the right aligned and use text or teaser before it if needed.
- Left aligned, outside group:
- Left aligned, inside group:
- Text + Accordions combination centered:
Accordion 1
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 2
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
- Right alignment
- Outside group
- Bone background
- No call-to-action link
- No title
Accordion 1
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 2
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Text + Accordions Combo
This is an example of an accordion where a text paragraph is used as the heading (H2) title. It works well for long lists and must be placed inside a group to display correctly with a white background. Both the title and description should be added using a text paragraph component before adding your accordions.
- In normal group only
- Right alignment
- Margin setting: none
Accordion 1
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 2
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 3
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
- In group (narrow)
- Center alignment
- Margin setting: default
Accordion 1
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 2
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 3
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Accordion 4
This is just an example of what the paragraph component would look like. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.
Additional Web Editing Resources
