Portland Community College | Portland, Oregon

Expandable sections

About this component

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 ¨C they look like regular link text ¨C but try to keep them as short as possible without losing meaning.

How to use for Expandable sections

Use the pcc-collapse shortcode.

• The expandable headings must all be of the same level.
• The expandable content can include any other components.
  • If including more headings, they must be at a lower level than the expandable headings.

<div class="open-sesame">
  <h4>Heading 1</h4> <!-- or whatever heading level is needed -->
  <p>Content</p> <!-- or whatever content is needed -->
  <h4>Heading 2</h4> <!-- same level as above -->
  <p>Content</p>
  ...
</div>