Tabbed Interface

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

Dynamically stacks multiple sections of content, transforming them into a tabbed interface. Implements the WAI-ARIA tab panel design pattern for large screens and the WAI-ARIA accordion design pattern for small screens.

Working example

How to implement

Tabbed interface

  1. Add a div element to the page with the class wb-tabs.
  2. Add a div element to the previous div element with the class tabpanels.
  3. For each tab panel, add a details element with a unique id. Add open="open" for the tab panel that should be open by default. 
    <div class="wb-tabs">
	<div class="tabpanels">
		<details id="details-panel1">
			...
		</details>
		<details id="details-panel2" open="open">
			...
		</details>
  4. Add a summary element with the label of the tab to each details element. 
    <details id="details-panel1">
		<summary>Example 1</summary>
		...
	</details>
	<details id="details-panel2" open="open">
		<summary>Example 2</summary>
		...
	</details>
  5. Add the tab panel content after each summary element.

Code

<div class="wb-tabs">
	<div class="tabpanels">
		<details id="details-panel1">
			<summary>Example 1</summary>
			<p>
				...
			</p>
		</details>
		<details id="details-panel2" open="open">
			<summary>Example 2</summary>
			<p>
				...
			</p>
		</details>
		...
	</div>
</div>

Carousel

  1. Add a div element to the page with the class wb-tabs and either the styling class carousel-s1 or carousel-s2.
  2. Add a div element to the previous div element with the class tabpanels.
  3. For each tab panel, add a div element with a unique id, role="tabpanel" and class="out". For the tab panel that should be opened by default, replace the out class with in.
  4. Specify the tab panel transition type by adding one of the following classes to the div element for each of the tab panels:
    • fade: Fading transition
    • slide: Horizontal sliding transition
    • slidevert: Vertical sliding transition
    <div class="wb-tabs carousel-s1">
	<div class="tabpanels">
		<div role="tabpanel" id="panel1" class="in fade">
		</div>
		<div role="tabpanel" id="panel2" class="out fade">
		</div>
	</div>
</div>
  5. Add a figure element to each tab panel.
  6. Add content to each figure element:
    • Image: Add an image to the figure element followed by a figcaption element with the caption for the tab panel. 
      <div role="tabpanel" id="panel1" class="in fade">
	<figure>
		<img src="img/protect-environment.jpg" alt="Panel 1" />
		<figcaption>
			<p>
				Take Note: <a href="http://www.tc.gc.ca/eng/civilaviation/opssvs/general-personnel-changes-1814.htm">Renewal of the Aviation Document Booklet</a>&#160;<br />
				Learn more about <a href="http://www.tc.gc.ca/eng/air-menu.htm">air transportation</a> in Canada.
			</p>
		</figcaption>
	</figure>
</div>
    • Video: Add a multimedia player to the figure element according to the multimedia player documentation. 
      <div role="tabpanel" id="panel1" class="in fade">
	<figure class="wb-mltmd">
		<video poster="http://www.servicecanada.gc.ca/eng/video/images/te-lj-eng.jpg" title="Looking for a Job">
			<source type="video/webm" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.webm" />
			<source type="video/mp4" src="http://video2.servicecanada.gc.ca/video/boew-wet/te-lj-eng.mp4" />
			<track src="../multimedia/cpts-lg-en.html" kind="captions" data-type="text/html" srclang="en" label="English" />
		</video>
		<figcaption>
			<p>Looking for a Job (<a href="http://www.servicecanada.gc.ca/eng/video/lj.shtml">Transcript</a>)</p>
		</figcaption>
	</figure>
</div>
    • Other content: Add content to the figure element followed by a figcaption element with the caption for the tab panel. 
      <div role="tabpanel" id="panel1" class="in fade">
	<figure>
		<table>
			...
		</table>
		<figcaption>
			<p>Tab panel caption</p>
		</figcaption>
	</figure>
</div>
  7. Add a ul element with role="tablist" at the start of the div element with the wb-tabs class.
  8. For each tab panel, add an li element to the previous ul element. Add class="active" for the tab panel that should be open by default.
  9. Add an a element to each li element
  10. Add to each li element an a element with the label of the tab and that links to the associated tab panel. 
    <ul role="tablist">
	<li class="active"><a href="#panel27">Tab 1</a></li>
	<li><a href="#panel28">Tab 2</a></li>
		...
</ul>
  11. Optional: Override the default settings using the configuration options.

Code

<div class="wb-tabs carousel-s1">
	<ul role="tablist">
		<li class="active"><a href="#panel1">Tab 1</a></li>
		<li><a href="#panel2">Tab 2</a></li>
		...
	</ul>
	<div class="tabpanels">
		<div role="tabpanel" id="panel1" class="in fade">
			<figure>
				<img src="img/protect-environment.jpg" alt="Panel 1" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		<div role="tabpanel" id="panel2" class="out fade">
			<figure>
				<img src="img/banff.jpg" alt="Panel 2" />
				<figcaption>
					<p>
						...
					</p>
				</figcaption>
			</figure>
		</div>
		...
	</div>
</div>

Configuration options (carousel only)

Option Description How to configure Values
Carousel style Configures the carousel style. Add the value after the wb-tabs class (e.g., class="wb-tabs carousel-s1")
carousel-s1:
Square grey controls located at the top of the carousel.
carousel-s2:
Rounded white controls located at the bottom of the carousel.
Change rotation speed (data-wb-tabs) Configure the tab rotation speed through the interval property of the data-wb-tabs attribute. Add the data-wb-tabs attribute to the element with class="wb-tabs" and include the interval property with the number of seconds between tab rotations. 
data-wb-tabs='{"interval": 3}'
6 (default):
Six seconds between tab rotations
Integer
Number of seconds between tab rotations
Change rotation speed (slow, fast) Configure the tab rotation speed through either the slow or fast classes. Add either slow or fast after the wb-tabs class. 
class="wb-tabs slow"
None (default):
Six seconds between tab rotations
slow
Nine seconds between tab rotations
fast
Three seconds between tab rotations
Tab panel transitions Configure the tab panel transition type through the fade, slide or slidevert classes. Add fade, slide or slidevert after the in or out class on each tab panel. 
<div role="tabpanel" id="panel21" class="in fade">
fade:
Fading transition
slide
Horizontal sliding transition
slidevert
Vertical sliding transition
Exclude play (data-wb-tabs) (v4.0.5+) Exclude the play button from the carousel controls through the excludePlay property of the data-wb-tabs attribute. Add the data-wb-tabs attribute to the element with class="wb-tabs" and include the excludePlay property with true for the value. 
data-wb-tabs='{"excludePlay": true}'
false (default):
Play button is included in the carousel controls.
true:
Play button is excluded from the carousel controls.
Exclude play (exclude-play) (v4.0.5+) Exclude the play button from the carousel controls through the exclude-play class. Add exclude-play after the wb-tabs class. 
class="wb-tabs exclude-play"
None (default):
Play button is included in the carousel controls.
playing
Play button is excluded from the carousel controls.
Play on page load (data-wb-tabs) (v4.0.5+) Play the carousel on page load through the playing property of the data-wb-tabs attribute.
Warning: Playing on page load can be distracting and cause usability issues for some users.
Note: Playing will be disabled if the play button is excluded from the carousel controls.		 Add the data-wb-tabs attribute to the element with class="wb-tabs" and include the playing property with true for the value. 
data-wb-tabs='{"playing": true}'
false (default):
Carousel does not play on page load.
true:
Carousel plays on page load.
Play on page load (playing) Play the carousel on page load through the playing class.
Warning: Playing on page load can be distracting and cause usability issues for some users.
Note: Playing will be disabled if the play button is excluded from the carousel controls.		 Add playing after the wb-tabs class. 
class="wb-tabs playing"
None (default):
Carousel does not play on page load.
playing
Carousel plays on page load.

Events

Event Trigger What it does
wb-init.wb-tabs Triggered manually (e.g., $( ".wb-tabs" ).trigger( "wb-init.wb-tabs" );). Used to manually initialize the Tabbed interface plugin. Note: The Tabbed interface plugin will be initialized automatically unless the required markup is added after the page has already loaded.
wb-ready.wb-tabs (v4.0.5+) Triggered automatically after a tabbed interface or carousel initializes. Used to identify which tabbed interface or carousel was initialized (target of the event) 
$( document ).on( "wb-ready.wb-tabs", ".wb-tabs", function( event ) {
});
$( ".wb-tabs" ).on( "wb-ready.wb-tabs", function( event ) {
});
wb-updated.wb-tabs (v4.0.5+) Triggered automatically after a tabbed interface/carousel was updated (visible tab panel changed). Used to identify which tabbed inteface/carousel was updated (target of the event) and to pass along the newly visible panel (as a jQuery object). 
$( document ).on( "wb-updated.wb-tabs", ".wb-tabs", function( event, $newPanel ) {
});
$( ".wb-tabs" ).on( "wb-updated.wb-tabs", function( event, $newPanel ) {
});
wb-shift.wb-tabs (carousel only) Triggered manually or automatically to change which tab panel is visible. Changes which tab panel is visible. The value of shiftto is the number of tab panels to move forwards (positive number) or backwards (negative number). 
$elm.trigger({
    type: "wb-shift.wb-tabs",
    shiftto: 1
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Tabbed interface plugin source code on GitHub

Date modified: