Portland Community College | Portland, Oregon

Each tab will be on its own line, with a “plus” icon to indicate you can open/expand the information. By default, the first tab is open when the page loads on phones. The tabs then behave like an accordion, where each tab’s content opens below the corresponding heading. Only one tab can be open at a time, so if another is opened the previous tab will close.

Try to avoid tabs that switch to this small-screen layout all large and on most medium screens.

Stylesheet location: /_source/styles/components/_tabs.scss

Javascript adds all the extra functionality, styles, and accessibility to make the tabs. You only need to include the headings and corresponding content.

<div class="tabs">
  <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>