Web services

Expandable sections

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.

Styling

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.

Responsive behavior

No change.

Development info
  • Stylesheet location: /_source/styles/components/_open-sesame.scss
  • <div class="open-sesame">
  • Headings must all be the same level (<h4>, etc.).
    • 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.
  • Javascript adds all the extra functionality and styles to make the sections expand and be accessible. You only need to include the headings and corresponding content.
  • 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?

A clowder!
cat cat cat

What is it called when a cat wins a dog show?

A cat-has-trophy!