UCSF

Multitab Structures

This page describes for web editors in the School of Pharmacy how to use multitab structures in a website built by the Office of Planning and Communications.

On this page

What is a multitab structure?

Multitab structures enable you to display text on different tabs within the same page area.

Simple multitab

Tab 1

Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation.

Tab 2

Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off—then, I account it high time to get to sea as soon as I can.

Tab 3

This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.

Tab 4

There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.

  • On mobile devices, the tabs become accordions.

  • You can have more than one multitab structure on a page.

  • We support nested multitab structures, but only one level deep.

Nested multitab

Tab 1

Content for tab 1

Nested tab 1

Content for nested tab 1

Nested tab 2

Content for nested tab 2

Nested tab 3

Content for nested tab 3

Nested tab 4

Content for nested tab 4

Tab 2

Content for tab 2

Tab 3

Content for tab 3

Tab 4

Content for tab 4

Multitab examples in context

Use multitab structures when

  • You need to provide more info than you have space for.

  • You don’t want visitors to feel overwhelmed by the amount of info you have.

  • Info applies only to certain categories.

  • Visitors don’t need to see info under separate tabs simultaneously.

Guidelines

  1. Make the tab categories mutually exclusive.

  2. Write short tab labels that use plain language rather than made-up terms.

  3. Keep the tabs to one row.

  4. Use sentence case or title case for the tab labels. Avoid all caps, which is harder to read.

Printing

When printing pages with multitab structures, all the tabs print rather than just the selected, visible tab.

Add a simple multitab

Copy the code below and paste it while editing in source mode. Exit source mode, then edit the tabs and tab content.

<div class="responsive-tabs">
  <h3>Tab 1</h3>
  <div><p>Content for tab 1</p></div>
  <h3>Tab 2</h3>
  <div><p>Content for tab 2</p></div>
  <h3>Tab 3</h3>
  <div><p>Content for tab 3</p></div>
  <h3>Tab 4</h3>
  <div><p>Content for tab 4</p></div>
</div>

Add a nested multitab

Copy the code below and paste it while editing in source mode. Exit source mode, then edit the tabs and tab content.

<div class="responsive-tabs">
  <h3>Tab 1</h3>
  <div>
    <p>Content for tab 1</p>
    <div class="responsive-tabs">
      <h4>Nested tab 1</h4>
      <div><p>Content for nested tab 1</p></div>
      <h4>Nested tab 2</h4>
      <div><p>Content for nested tab 2</p></div>
      <h4>Nested tab 3</h4>
      <div><p>Content for nested tab 3</p></div>
      <h4>Nested tab 4</h4>
      <div><p>Content for nested tab 4</p></div>
    </div>
  </div>
  <h3>Tab 2</h3>
  <div><p>Content for tab 2</p></div>
  <h3>Tab 3</h3>
  <div><p>Content for tab 3</p></div>
  <h3>Tab 4</h3>
  <div><p>Content for tab 4</p></div>
</div>

Excerpt: Moby Dick by Herman Melville