Integration

Stylesheet

CSS

<link rel="stylesheet" href="css/tabs+accordion/tabs+accordion.css" />
<link rel="stylesheet" href="css/tabs+accordion/themes/minimal.css" />
<!--[if IE 8]><link href="css/tabs+accordion/ie8.css" rel="stylesheet" /><![endif]-->

Paste the above code within the head tags.

LESS

@import url("tabs+accordion/tabs+accordion.less");
@import url("tabs+accordion/themes/minimal.less");

Paste the above code at the top of your LESS stylesheet.

JavaScript

Regular

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/min/index.js"></script>
<script src="js/min/jquery.ba-resize.js"></script>
<script src="js/min/jquery.tabs+accordion.js"></script>

Paste the above code before the body ending tag.

An example of the regular integration can be found in the Underlined demo.

RequireJS

<script data-main="js/min/main.js" src="js/min/require.js"></script>

Paste the above code before the body ending tag.

An example of the RequireJS integration can be found in the Minimal, Minimal 2 and Detached demos.

For Internet Explorer 8 HTML5 support, you should also add either the HTML5 Shiv or Modernizr (which includes the former). Modernizr has the added advantage of preventing a flash of unstyled content because it ads a js classname (which indicates that JavaScript is enabled) before the page is loaded.

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="js/min/modernizr.js"></script>

Paste one of the above codes before the head ending tag.

Usage

HTML

Here is an example to create tabs:

<div class="tabs">
	<section>
		<h1>Title 1</h1>
		
		<p>Paragraph</p>
	</section>
	
	<section>
		<h1>Title 2</h1>
		
		<p>Paragraph</p>
		
		<img alt="Example" src="img/example.jpg" />
	</section>
</div>

To create an accordion instead, just change the classname from tabs to accordion.

JavaScript

Regular

$('.accordion, .tabs').TabsAccordion();

RequireJS

require(['jquery.tabs+accordion.min'], function() {

	$('.accordion, .tabs').TabsAccordion();
});

API reference

JavaScript

Dependencies

Initialization

Constructor Description
$(element:Node).TabsAccordion(options?:object | methodName:string, methodArguments?)
element
The wrapper element for the tabs or accordion.
options | methodName
An options object or the name of a method to call after Tabs + Accordion is initialized.

Methods

Method Return type Description
TabsAccordion('collapse', index:number) TabsAccordion Collapse the panel with the given index.
TabsAccordion('destroy') TabsAccordion Deconstruct Tabs + Accordion. Removes event listeners and data.
TabsAccordion('expand', index:number) TabsAccordion Expand the panel with the given index.
TabsAccordion('goTo', index:number) TabsAccordion Go to the panel with the given index. For Tabs this comes down to collapsing the current index and expanding the new index. Accordion also toggles the panel.

Properties

Property Type Description
type string Indicates the type. Either 'tabs' or 'accordion'
version string The version number.

Events

Event Arguments Description
collapse index, panel Invoked when a panel is collapsed.
create Invoked when a Accordion or Tabs is created.
destroy Invoked when a Accordion or Tabs is destroyed.
expand index, panel Invoked when a panel is expanded.
typechange type Invoked when the type (tabs or accordion) has changed.

Options

Option Type Description
hashWatch boolean Set to true to enable Hash Watch.
pauseMedia boolean Set to true to enable pausing HTML5 media inside a panel that is collapsed.
responsiveSwitch string | number A string, tablist or a number, when passed triggers switching from Tabs into Accordion and vice versa.
saveState object Either window.localStorage for Local Storage, window.sessionStorage for Session Storage.

CSS classnames

Classname Description
accordion Indicates an accordion.
cross-fade Enabled cross fade transitions for Tabs.
hide-title Hide Tabs title.
tabs Indicates tabs.

Detached theme

Minimal theme

Classname Description
apple-green Apply the apple green color scheme.
avocado Apply the azure color scheme.
azure Apply the azure color scheme.
carrot-orange Apply the carrot orange color scheme.
gutter Apply a gutter to the accordion panels.
minimal Use the minimal theme.
tomato Apply the tomato color scheme.

Minimal 2 theme

Underlined theme

Themes

Integration

Detached

<link href="css/tabs+accordion/themes/detached.css" rel="stylesheet" />

Minimal

<link href="css/tabs+accordion/themes/minimal.css" rel="stylesheet" />

Minimal 2

<link href="css/tabs+accordion/themes/minimal-2.css" rel="stylesheet" />

Underlined

<link href="css/tabs+accordion/themes/underlined.css" rel="stylesheet" />

Usage

Add the theme classname to the tabs or accordion element. It is the same as the filename:

<div class="tabs detached">

Color schemes

The Minimal 2 and Underlined themes supply extra color schemes:

To use one, add the classname to the tabs or accordion element:

<div class="tabs detached apple-green">

Customization

Accordion

Heading

.accordion > section > h1 {

}

Panel

.accordion > section {

}

Panel content

.accordion > section > :first-child + * {

}

Panel content wrapper

.accordion > section > :first-child + * > * {

}

Transition duration

.accordion > section > :first-child + * {
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}

Tabs

Heading

.tabs > ul > li {

}

Panel

.tabs > section {

}

Transition duration

.tabs.cross-fade.transition {
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}
.tabs.cross-fade.transition > section {
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
}

FAQ

How to close the accordion on page load?

To have all accordion panels collapsed on page load (in the case of an accordion), try the following code:

$('.accordion, .tabs')
.TabsAccordion({
	responsiveSwitch: 'tablist',
})
.one('expand', function() {

	$('.accordion').TabsAccordion('collapse', 0);
});

You can use this code instead of the standard intialization code. Just make sure you set the options as you wish.

When to use an accordion?

The Accordion pattern on YDN holds the answer.

When to use tabs?

The Tabs pattern on YDN holds the answer.

Can I have vertical tabs?

This is not fully supported. We tested it out but it didn't go completely smooth.

What about an horizontal accordion?

No plans for that one. We like it classic.

Compatibility

Firefox Chrome Safari Opera IE9 IE8 iOS Android
transition yes yes yes yes no no yes yes

Changelog

1.2.0

1.1.2

1.1.1

1.1.0

Alternatives

If Tabs + Accordion isn't your cup of cake, here are some alternative cups:

CSS only

jQuery

JS Prototype

MooTools

Wordpress