Questions answered by this recipe
All sections are optional, you can remove those that do not apply to your recipe, and add new ones.
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:
Add configuration settings before include of the script file!
You can set class names for the div sections and the links:
$AccordionConfig['class'] = '
- The default section class name is acc
$AccordionConfig['a-class'] = '
- 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.
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:
- show all Accordion sections
- hide all Accordion sections.
- expand all Accordion sections within a containing div.
- 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:)
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 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.