JS Tabbed

Overview

JS Tabbed is used for creating toggleable content areas, which are called panels.

Panels can be toggled by tabs and/or dropdowns. Clicking on the nth tab, or selecting the nth option from a tabbed dropdown, will show panel n and hide all other panels.

Notes

  • The currently selected tab's parent (typically an li) gets the class is-selected to support styling.
  • JS Tabbed does not support showing more than one panel at a time.
  • JS Tabbed does not support animations; panels are shown/hidden instantly.
  • JS Tabbed modules can be nested within one another (see examples)

Options

data-tabbed-shown

A number representing the index of the panel that should be shown first on page load. Defaults to 0.

data-tabbed-breakpoint

A String representing the media query that, when matched, disables the tabbed behavior (shows all panels and hides tabs and dropdowns).

Examples

Basic Tabs

  • Panel 1

  • Panel 2

  • Panel 3

Second Panel Shown First

  • Panel 1

  • Panel 2

  • Panel 3

Dropdown

  • Panel 1

  • Panel 2

  • Panel 3

Mobile-Only Tabs

  • Panel 1

  • Panel 2

  • Panel 3

Nested Tabs

    • Nested Panel 1

    • Nested Panel 2

    • Nested Panel 3

  • Panel 2

  • Panel 3