Accordions
Code Snippet Library
Accordions are another way to "chunk" page content. These can help reduce the length of a long page, lessen visual clutter, and provide a quick overview of the page, similar to a table of contents. The styles we are recommending here have a main (h2) heading introducing the accordion content and a subheading (h3) to start each section. This provides proper heading structure to augment the visual styling of the accordions, which will benefit those who can't see the page and navigate using a screen reader. Additionally, they are fully accessible, meaning they can be operated by a screen reader, a keyboard, a mouse, or by touch on a mobile device.
Plain Accordion
This style is simple and includes proper heading structure.
Heading Introducing the Content
Title
Subheading
Content here.
Title
Subheading
Content here.
Title
Subheading
Content here.
Plain Accordion Code to Copy
<h2>Heading Introducing the Content</h2><details style="border: 1px solid #C3C3C3; border-radius: 5px; margin: 0 0 10px 0; background-color: #ffffff; color: #46515B;">
<summary style="padding: 10px; cursor: pointer;">Title</summary>
<h3 style="margin-left: 10px;">Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details style="border: 1px solid #C3C3C3; border-radius: 5px; margin: 0 0 10px 0; background-color: #ffffff; color: #46515B">
<summary style="padding: 10px; cursor: pointer;">Title</summary>
<h3 style="margin-left: 10px;">Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details style="border: 1px solid #C3C3C3; border-radius: 5px; margin: 0 0 10px 0; background-color: #ffffff; color: #46515B">
<summary style="padding: 10px; cursor: pointer;">Title</summary>
<h3 style="margin-left: 10px;">Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
You can modify the background color and the font color for a different look.
Chunky Accordion
This style has oversized font using a percentage.
Heading Introducing the Content
Title
Subheading
Content here.
Title
Subheading
Content here.
Title
Subheading
Content here.
Code: Plain Show/Hide Accordion
<h2>Heading Introducing the Content</h2>
<details style="margin: 0 0 5px 0;">
<summary style="padding: 15px; font-size: 150%; border: 2px solid #A2AAAD; border-radius: 5px; cursor: pointer;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details style="margin: 0 0 5px 0;">
<summary style="padding: 15px; font-size: 150%; border: 2px solid #A2AAAD; border-radius: 5px; cursor: pointer;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details style="margin: 0 0 5px 0;">
<summary style="padding: 15px; font-size: 150%; border: 2px solid #A2AAAD; border-radius: 5px; cursor: pointer;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
Chunky Accordion With Color
This is the same style using a dark background color and white text.
Heading Introducing the Content
Title
Subheading
Content here.
Title
Subheading
Content here.
Title
Subheading
Content here.
Code: Color Show/Hide Accordion
<h2>Heading Introducing the Content</h2>
<details style="margin: 0 0 5px 0;">
<summary style="padding: 15px; font-size: 150%; background: #1E407C; color: #ffffff; border: 1px solid #001E44; border-radius: 5px; cursor: pointer;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details style="margin: 0 0 5px 0;">
<summary style="padding: 15px; font-size: 150%; background: #1E407C; color: #ffffff; border: 1px solid #001E44; border-radius: 5px; cursor: pointer;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details style="margin: 0 0 5px 0;">
<summary style="padding: 15px; font-size: 150%; background: #1E407C; color: #ffffff; border: 1px solid #001E44; border-radius: 5px; cursor: pointer;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
Caution: Don't put too much content in each accordion
Remember not to put too much content in an accordion or combine this style with multimedia-heavy content. While this can shorten a page and make it look less cluttered, it does increase the interaction needed from the learner, so be mindful of that trade-off.
Modifications and Guidelines
- Use different colors for the background and borders
- Adjust the title font size by changing the percentage.
- Add padding, line, or margin space.