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

Saying

Third

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

Cross Browser

A few examples

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

Default Example

Fruits

Info

Accordion Example

Accordions

Fruits

Info

Yeah!!

Persistence Example

These

Sections

Should be

Persistant!!

Custom show & hide

Hello

Anarachy in the UK

Indeed

w/ CSS3 Animations

Hello

Friend

Foe

Custom markup example

Hello

Friend

Foe

Binding events

Event log

Section 1

Section 2

Section 3

Open section by default