E-mail
Example
Following is an image depicting what the Twisty plugin creates when applied. The Twisty plugin creates 'twisty bars' that expand and collapse when clicked.
Download
Download Base22 jQuery Twisty Plugin v1.0
Usage Instructions
First, include the jQuery Twisty plugin in the HEAD section of your HTML document. Something like so:
You'll need to follow a standard HTML structure for anything you want to turn into a Twisty.
Create a DIV with class="twisty open" or class="twisty closed". Place two DIVs inside. The first DIV inside should contain the Title and the second DIV inside will contain the contents. Like this:
Finally, anywhere on the page, you can search for all DIVs with class 'twisty' and apply the twisty plugin, like this:
Alternatively, you can pass in some parameters to override the defaults, like this:
$('div.twisty').twisty({speed:'slow',classOpen:'twistyOpen',classClosed:'twistyClosed'});
The css classes 'twistyOpen' and 'twistyClosed' are used by default, so if you do not pass alternative css class names, you will need to create your own.
Following are the CSS classes used in the attached demo which you can use as a reference: