Accordion

Summary: lightweight Accordion javascript requiring no framework
Version: 2017-06-16
Prerequisites: PmWiki 2.2.56 (compatible with PHP 5.5)
Status: stable
Maintainer: HansB
Users: +1 (view / edit)
Discussion: Accordion-Talk
Download: accordion.phpΔ

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:

include_once('cookbook/accordion.php');

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:

[[## link text]]

Use either header markup plus accordion link markup, like

!!!![[## Section Heading]]

or wiki style markup plus accordion link markup, like

%mystyle%[[## Section Header]]

not header plus style plus aaccordion markup.

Example:
!!![[## 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

  • 2017-06-16: updated markup definition for PHP 7.2 compatibility.
  • 2014-02-21: updated markup definition for PHP 5.5 compatibility.
  • 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

Cookbook /
Toggle  Adds links or buttons for toggling (hiding/showing) div sections and objects (stable)
UnToggle  An unobtrusive show/hide toggle switch. (Beta)

Contributors

Comments

See discussion at Accordion-Talk

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.