• View
• Edit
• History
• Attach
• Print
• Backlinks

Accordion

Questions answered by this recipe

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

Lightweight javascript functionality for hiding designated sections (using a class name for each div section) while showing just one, by clicking on a header link. This script does not require any javascript framework (like jquery).

Installation

Download accordion.phpΔ, copy to your cookbook folder and install in config.php or a page or group php file in the usual way by adding:

Configuration

Add configuration settings before include of the script file!

You can set class names for the div sections and the links:

$AccordionConfig['class'] = 'mycustomclass';

The default section class name is acc

$AccordionConfig['a-class'] = 'mylinkclass';

The default links class name is acclink

No style atttributes are provided with this recipe, create your own!

The default behaviour of hiding all sections but the one which is selected by clicking the link in the header can be changed, so that sections already opened will remain open:

$AccordionConfig['show'] = 1;

opened sections will remain open. Default is 0.

$AccordionConfig['a-jump'] = 1;

Clicking accordion link will place link at window top. Default is 0, clicking link will not shift window scroll position.

Usage

Create Accordion sections using div markup with class acc (or your custom class specified in config). Directly above each section create a header (using standard header markup of any level) with an Accordion link markup like [[## Section Heading]].

Accordion link format:

Use either header markup plus accordion link markup, like

or wiki style markup plus accordion link markup, like

not header plus style plus aaccordion markup.

!!![[## Section 1]]
>>acc<<
Section 1 content goes here.
Any normal wiki content.
>><<

!!![[## Section 2]]
>>acc<<
Section 2 content....
>><<

!!![[## Section 3]]
>>acc<<
Section 3 content....
>><<

etc.

Instead of using the >>acc<< simple div markup, you can also use standard (:div ... class=acc:) markup.
You can also use nested divs up to four levels deep (see DivisionsExplained).

Additional special link formats:

[[##all: link text]]

show all Accordion sections

[[##none: link text]]

hide all Accordion sections.

[[##show: link text]]

expand all Accordion sections within a containing div.

[[##hide: link text]]

hide all Accordion sections within a containing div.

For the last two use a wrapper div markup as in this example:

[[##all: show all]] |[[##none: hide all]]
(:div0 class=accordion:)
[[##show: show this]] | [[##hide: hide this]]
!!![[## Section 1]]
>>acc<<
Section 1 content...
>><<

!!![[## Section 2]]
>>acc<<
Section 2 content....
>><<

!!![[## Section 3]]
>>acc<<
Section 3 content....
>><<
(:div0end:)

(:div0 class=accordion:)
[[##show: show this]] | [[##hide: hide this]]
!!![[## Section 4]]
>>acc<<
Section 4 content...
>><<

!!![[## Section 5]]
>>acc<<
Section 5 content....
>><<

!!![[## Section 6]]
>>acc<<
Section 6 content....
>><<
(:div0end:)

Notes

Future development ideas:

• add 'stay open' option for shown sections. Done in version 2011-02-16
• add toggle behaviour to links
• allow wiki styles in section headers

Change log / Release notes

• 2011-06-29: fixed to make script IE9 compliant.
• 2011-06-21: optimised code so script will only load on pages which uses accordion link markup.
• 2011-02-18: added name with serial numbering to link markup. Added config parameter to allow jumping to link clicked.
• 2011-02-16: changed special link markup, added config settings for link class and for persistent show.
• 2011-02-15: initial release.

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

See also

Contributors

• HansB

Comments

See discussion at Accordion-Talk