Accordion
Questions answered by this recipe
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.
!!![[## 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.
See also
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.