Tabs

Tabs are presented horizontally with the content of the selected tab appearing directly below the tabs. Tyfy tabs:

• are responsive, reducing to collapsable headings at small screen sizes
• allow for anchored links to tabs or to content inside inactive tabs
• require Javascript (tabs.js)

HTML Structure

All tab labels and tab content are enclosed in a block-level element with the tabs-container class. Individual tabs are defined by indicating the label for each tab with the tab-label class.

<div class="tabs-container">
  <h2 class="tab-label">Tab Label 1</h2>
  <p>[content of the tab]</p>
  <p>[content of the tab]</p>
  <h2 class="tab-label">Tab Label 2</h2>
  <p>[content of the tab]</p>
  <ul>[content of the tab]</ul>
</div>

JavaScript is used to identify the contents of each tab and to generate the clickable tabs. The content of a tab is defined as all the next sibling elements following the tab-label element up to the next tab-label. JavaScript wraps the content of each tab in a <div> with the class tab-panel. In addition, the script creates an unordered list for the clickable tabs. Each tab label becomes and item in the list. To indicate that JavaScript has acted on the tabs, the class tyfy-tabs-processed is added to the tabs container. So, after JavaScript has run, the code will appear as follows:

<div class="tabs-container tyfy-tabs-processed">
  <ul class="tabs">
    <li data-tabindex="0" class="open">Tab Label 1</li>
    <li data-tabindex="1" class="closed">Tab Label 2</li>
  </ul>
  <h2 class="tab-label open" data-tabindex="0"><a id="Tab%20Label%201">Tab Label 1</a></h2>
  <div class="tab-panel open">
    <p>[content of the tab]</p>
    <p>[content of the tab]</p>
  </div>
  <h2 class="tab-label closed" data-tabindex="1"><a id="Tab%20Label%202">Tab Label 2</a></h2>
  <div class="tab-panel closed">
    <p>[content of the tab]</p>
    <ul>[content of the tab]</ul>
  </div>
</div>

Variables

$tybreak-tabs

40em !default;

Screen width below which the responsive tabs convert to collapsable sections.

$tywidth-border

2px !default;

The border thickness for tabs and the tab container.

$tycolor-border

mix($tycolor-fg,$tycolor-bg,12%) !default;

The border color

$tyicons-angle-up

"ea08" !default;

The character code for the angle-up icon. This icon is used at small screen sizes when tabs become collapsable headings. The icon is rotated 180 degrees when the collapsable heading is in the closed state.

Example

<p>Test links to:</p>
<ul>
  <li><a href="#anchor">An anchor in the second tab</a></li>
  <li><a href="#Scelerisque">The third tab</a></li>
</ul>
<div class="tabs-container">
  <h2 class="tab-label">Lorem Ipsum</h2>
  <p>Porro excepturi ad eligendi excepturi quam voluptate velit. Placeat modi animi natus est temporibus tenetur pariatur suscipit. Dolores sit id sit placeat consequatur temporibus accusamus et. Cumque voluptatum voluptatum delectus et sequi. Vero vitae officia eius ad. Consequatur impedit quam mollitia.</p>
  <p>Aspernatur id nihil sit eveniet vero corporis necessitatibus sit. Magni quia vitae perferendis. Suscipit illo tempora minus officia nemo aut numquam. Qui et omnis velit repudiandae autem. Aperiam aut dolorem neque quis dolor est sunt.</p>
  <h2 class="tab-label">Dolor Sit Amet</h2>
  <p>Facilis error corrupti dolor eaque. <a name="anchor"><em>Anchor link</em></a> illum sequi officia rerum nostrum. Iste in quo eveniet. Deserunt quaerat a adipisci magni consequatur nesciunt distinctio praesentium. Ipsum vel ut est vel veritatis fugiat perspiciatis.</p>
  <p>Omnis dolores sit pariatur facilis odit magni. Totam excepturi incidunt dolorem assumenda neque dolorem. Dolorem odio consequatur quas corrupti sequi. Nihil ut nihil itaque non at molestiae corporis. Explicabo voluptate quis et.</p>
  <h2 class="tab-label">Scelerisque</h2>
  <p>Curabitur non mauris sodales, tempor lacus ac, maximus felis. Vestibulum ultrices augue ut arcu mattis pellentesque. Maecenas ullamcorper lorem sit amet pretium pharetra. Nunc ipsum tellus, hendrerit vitae bibendum vel, scelerisque sit amet libero. Duis imperdiet massa placerat venenatis pharetra. Donec consectetur quis odio sit amet sollicitudin. Morbi at faucibus odio. Duis viverra lacus a odio pretium, quis suscipit tortor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur egestas venenatis est vel hendrerit. Fusce molestie bibendum ex in suscipit.</p>
</div>