6.28 Select tabs View in a new window

Use a select element to show tab panels.

Twig: components/select-tab/select-tab.twig

Example

Tab 1

Tab 2

Tab 3

Markup
<div class="select-tab js-select-tab">
  <div class="select-tab__form">
    <label for="select-tab">Make a selection to show the results below:</label>
    <select class="select-tab__menu" id="select-tab">
      <option value="select-tab-1">Tab 1</option>
      <option value="select-tab-2">Tab 2</option>
      <option value="select-tab-3">Tab 3</option>
    </select>
  </div>
  <section class="select-tab__panel" id="select-tab-1">
    <p>Tab 1</p>
  </section>
  <section class="select-tab__panel" id="select-tab-2">
    <p>Tab 2</p>
  </section>
  <section class="select-tab__panel" id="select-tab-3">
    <p>Tab 3</p>
  </section>
</div>