Fork me on GitHub
webcloud / jQuery Collapse

Collapsible Content with JavaScript

This plugin provides you an accessible and lightweight solution to a widely adopted interface pattern known as progressive disclosure.

Read the full documentation for more info.

Basic Usage

<div id="demo" data-collapse="accordion persist">
  <h2>Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
  <h2>Hint</h2>
  <div>
    <p>One fruit a day keeps the doctor away</p>
  </div>
  <h2>Third</h2>
  <p>Just a paragraph here</p>
</div>

Fruits

  • Apple
  • Pear
  • Orange

Saying

One fruit a day keeps the doctor away

Third

Just a paragraph here

Features

Persistence

Remembers open sections on page reload using either HTML5 localStorage or cookies!

Accordion

jQuery Collapse is packed with the classic 'accordion' behaviour that can be easily toggled on and off.

WAI-ARIA Compliance

The plugin has been designed with WAI-ARIA in mind which defines a way to make Web content and Web applications more accessible to people with disabilities.

Lightweight

jQuery-Collapse is designed to be lightweight with minimal bloat. It's only ~1kb when compiled and gzipped!

Cross Browser

Fully tested in IE6+, Firefox3+, Chrome5+, Safari4+, Opera 10+. Degrades gracefully in unsupported browsers

A few examples

To better understand how these examples work I recommend you to view the source.

Default Example

Fruits

I like fruits. This link should work

Info

This is some information

Accordion Example

Accordions

Are fun and they make pleasent noises

Fruits

I like fruits

Info

This is some information

Yeah!!

eh

Persistence Example

These

Well hello there

Sections

yabayaba

Should be

might be.

Persistant!!

eh

Custom show & hide

Hello

Hello Sir.

I'm sliding

Anarachy in the UK

I like tea

Indeed

This is some information

w/ CSS3 Animations

Hello

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Hello Sir.

I'm sliding

Friend

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Hello Sir.

Foe

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Custom markup example

Hello

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Hello Sir.

I'm sliding

Friend

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Hello Sir.

Foe

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Binding events

Event log

Section 1

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Hello Sir.

I'm sliding

Section 2

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Hello Sir.

Section 3

This example simply sets a class attribute to the details and let's an external stylesheet toggle the collapsed state.

Open section by default

I'm open by default

Yay

I'm not open

booo :(