Like tabs, expandable sections are a great way to display large amounts of information in a way that doesn’t overwhelm users. Unlike tabs, you aren’t limited to a certain number of headings, and the headings can be any length.
Expandable sections can be used on their own or in groups of multiple sections. Unlike tabs, the content in each expandable section doesn’t need to be directly related to those around it.
Expandable sections can include any kind of content, such as text, lists, images, or videos. They are often used for things like instructions, “more information”, bios, and frequently asked questions.
Only the top-level headings are visible by default. These headings have a plus icon to the left of the text indicating that it’s expandable. When clicked and expanded, the corresponding content slides down into view, and the icon next to the heading turns into a minus icon.
It’s fine if the headings wrap to a second line – they look like regular link text – but try to keep them as short as possible without losing meaning.
- Stylesheet location:
- Headings must all be the same level (
- The headings turn into the visible expandable links.
- The expandable content can include headings, but they must be at a level below the expandable headings.
- The expandable content can include any HTML elements.
- In WordPress, use the pcc-collapse shortcode.
<div class="open-sesame"> <!-- or pcc-collapse shortcode in WordPress --> <h4>Heading 1</h4> <!-- or whatever heading level is needed --> <p>Content</p> <!-- or whatever content is needed --> <h4>Heading 2</h4> <p>Content</p> ... </div>
Expandable section example
What is a group of cats called?
cat cat cat
What is it called when a cat wins a dog show?