Responsive

Go ahead, scale the browser up and down and see things change! When you reach far enough, you will notice Responsive Switch transforming Tabs into Accordion.

Go to tab 2

Nested instance

Here is an example of a nested instance:

Images

Video

Map

Accessible

To test out keyboard accessibility:

  1. Set focus on this element by clicking on it or keyboard tabbing to it.
  2. Press the right arrow key to navigate to the next panel.
  3. Or press the left arrow key to navigate to the previous panel.

Now, let's check how things look with JavaScript disabled:

  1. Open your browser's preferences.
  2. Disable JavaScript.
  3. Refresh the page.
  4. All content should be right there.

Save State

The Save State option is enabled. To check it out, refresh the page. Notice how the active panel remains.

To show how Tabs + Accordion integrates and behaves around other page elements, this little paragraph hangs around.