Tabs + Accordion is a jQuery plugin that simplifies creating responsive tabs and accordions.

Responsive

The small things count a lot.

Shared Markup

With simple, shared markup, it becomes instantly easy to create tabs and accordions.

Tabs

<div class="tabs">
	<section>
		<h1>Panel 1 title</h1>
		
		<!-- Panel 1 content -->
	</section>
	
	<section>
		<h1>Panel 2 title</h1>
		
		<!-- Panel 2 content -->
	</section>
</div>

Accordion

<div class="accordion">
	<section>
		<h1>Panel 1 title</h1>
		
		<!-- Panel 1 content -->
	</section>
	
	<section>
		<h1>Panel 2 title</h1>
		
		<!-- Panel 2 content -->
	</section>
</div>

Themes

Choose a theme. Or apply a lick of paint yourself.

You get four themes to start with, and you can create your own with CSS or LESS. Because the HTML markup is simple, theming shouldn't be a head breaker. To kickstart your own awesome theme, an empty theme is included as well.

Tabs + Accordion has a lot more going on.

Save State

With HTML5 Local Storage the active tabs or accordion panel is saved and restored upon reentering the page. Or you can choose for Session Storage, which remembers the state during a single browsing session.

Pause Media²

With the Pause Media option, HTML5 audio and video elements inside the current panel are automatically paused when going to a new panel.

Hash Watch Beta

Hash Watch gives you the option to link to any Tabs or Accordion panel through an URL. Upon clicked and upon page load, the hash is checked and when it matches, the corresponding panel is expanded automatically. Example: Open panel 2 in the demo.

Accessible

Use your keyboard to access different panels. First focus on the element and then press the left, right, bottom or up arrow keys to navigate.

With JavaScript disabled, the content of Tabs + Accordion remains accessible.

Tested

Tabs + Accordion has been tested in Chrome, Firefox, IE8, IE9, Opera, Safari 5 and on iOS.

Well documented

Though Tabs + Accordion is made as simple as possible, it has extended documentation to help you out.

Multiple and nested instances

Of course, multiple instances on the same page are supported. If the situation requires it, you can actually nest Accordion into Tabs or Tabs into Tabs or …

Beautiful CSS3 transitions¹

They are smooth, fast and future proof.
Accordion has beautiful transitions when expanding and collapsing. With Tabs you can go classic without or opt in for a subtle cross-fade transition.

Semantic and SEO friendly

Semantic HTML elements and attributes are used in the markup. And there is is nothing that prevents SEO.

For developers

Powerful API

Set the expanded panel or switch types, Tabs + Accordion provides a powerful JavaScript API you can use to trigger changes code-wise.
Go to the API documentation for a complete overview of available methods, options and events.

LESS

Like to hangout with LESS? There you go, the LESS stylesheets are included in the download package.

RequireJS compatible

Tabs + Accordion is compatible with RequireJS and the AMD specification.

Minified and source versions

The minified JavaScript files provide the best performance while the commented source files are there for development.

Only in browsers that support CSS3 transitions.
Only in browsers that support HTML5 audio and video.