webcloud / code / jQuery Collapse
Comments

Progressive Disclosure

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different't scenarios.

Demo / Usage

It's all around you! / README

Options

Show

A function that defines how the content should be visually expanded.

default
function() { this.show(); }
type
function

Hide

A function that defines how the content should be visually hidden.

default
function() { this.hide(); }
type
function

Head

Type of element you want act as clickable headings.

default
"h2"
type
string

Group

Type of element to group hidden content.

default
"div, ul"
type
string

Cookie

Name of cookie used by the plugin.

default:
“collapse”
type:
string

Features

Tasty cookies

jQuery-Collapse is packed with cookie support. It'll remember what's visible and what's not. Just include the jQuery cookie plugin and it works! The plugin will gracefully degrade if cookie support is not available.

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 a lightweight plugin that performs well both on small and big scales. It's less than 600 bytes when compiled!

Cross Browser

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

Customizable

jQuery-Collapse is designed to be flexible and modular. Options include custom callbacks to satisfy every customization need.

And here's some good advice before you get started

Hiding content

Because of the loading nature of DOM and JavaScript the content you're hiding sometimes appears for a few milliseconds before hidden properly. This isn't pretty.

At first, it may be tempting to use CSS display:none because it's easy and it works, but this is bad bad BAD because your content will be inaccessible in the event of a JavaScript failure.

Unobtrusive hiding of content with JavaScript and CSS

The trick is to use a combination of JavaScript and CSS. Run this script in the head of your document:

document.documentElement.className = "js";

Now you can safely hide whatever content by prefixing with .js class

.js .some-element {display: none;}

F.A.Q

How can I modify the plugin to "slide" in the content?

It's easy! Just provide your own show method to the plugin option.

$("#options, #features .box").collapse({
    show: function() {
        this.animate({
            opacity: 'toggle', 
            height: 'toggle'
        }, 300);
    }
});
How do I make the content visible by default?

Add class="active" to the heading preceding the disclosed content

<h2 class="active">Heading</h2>
<div>Disclosed content</div>

What about HTML5?

<details>

There is new element in the HTML5 specification that will provide native support for progressive disclosure.

<details>
    <summary>This is a summary within detail</summary>
    <p>Content disclosed within the detail.</p>
</details>

No browser supports this (as of now) but we could upgrade our markup to HTML5 anyways and let jQuery-Collapse act as a fallback.

$("details").collapse({head: "summary", group: "p"})

Bruce Lawson has more to say about this.

Demo

This is a summary within detail (click me)

Content disclosed within the detail.

Further reading and so on...

Books

Would you rather do something by yourself? Here's a few books on the topic of interface design and programming that I highly recommend.

Designing Web Interfaces: Principles and Patterns for Rich Interactions jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

Disclaimer: These are affiliate links to Amazon, if you buy a book through these you'll sponsor further development of this and other similar projects.