C02 Accordion view more

The Show More Component allows displaying a preview of content followed by a "Show More" link, which expands to reveal the full content. A "Show Less" option lets users collapse it again, keeping the layout clean and user-friendly.
 

---

Component requirements

Required:

• Title type: Dropdown. Providers user ability to choose how title is styled. H2/H3/H4/P. Default: P 
• Title alignment: Left/Center. Default: Left
• Body copy alignment: Left/Center. Default: Left
• Always visible text: Rich text field. Displays portion of content that is always visible on the page to the user.
• Hidden text: Rich text field. Displays remainder of content that is initially hidden from the user.

Optional:

• Title: Text field. Appears above the Accordion view more element

---

Content guidelines

Lorem ipsum
Lorem ipsum

---

ADA requirements

Use aria-controls to link an accordion link to its corresponding content, ensuring proper accessibility.
Each element should have a unique id referenced in aria-controls, associating it with the content it controls.
Avoid manually setting 'hidden' display properties on content areas to ensure visibility if JavaScript fails to load.

---

Component examples

Example #1: Title enabled and configured as Paragraph. Body alignment is set to Center. Title alignment is set to Left.

 

Example #1: Title enabled and configured as H2. Body alignment is set to Center. Title alignment is set to Center.