Recent Changes - Search:
Cookbook /

FAQToggleList

Summary: Adding toggle buttons to a definition list
Version: 2006-10-28
Prerequisites: pmwiki 2.1
Status: stable
Maintainer: DaveG
Discussion: FAQToggleList-Talk
Categories: Layout
Download: dltoggle.zipΔ

Questions answered by this recipe

How can I create a FAQ list where the answers are hidden by default but can be individually shown by clicking a button or the question?
How can I create a definition list where the display of each definition is instantly switchable?

Description

dltoggle.zipΔ adds toggle buttons to a definition list (for instance a FAQ list).

dltoggle.php integrates TJK_ToggleDL by Thierry Koblentz - www.TJKDesign.com (see demo) into pmwiki, to create FAQ toggle lists using : term : definition markup. TJK_ToggleDL is published under the terms of the Creative Commons License for non-commercial use.

Install dltoggle.php into the Farm/cookbook folder, all other files of dltoggle.zipΔ into the farm/pub/dltoggle/ folder. Add to config.php:

include_once("$FarmD/cookbook/dltoggle.php");

Usage:

(:dltoggle:)
Definition list(s): 
: term : definition 
: term : definition 
Subheaders etc.
: term : definition 
: term : definition 
etc.
(:dltoggleend:)

Add (above the list) optional buttons to 'Show All' and 'Close All' definitions with

(:input submit id=DLToggleOn value='Open All' class=inputbutton:) and
(:input submit id=DLToggleOff value='Close All' class=inputbutton:)

For browsers with no javascript support the buttons will not show, and all definitions will be visible.

Notes

(:dltoggle:) opens a div with id=TJK_DL, which is used by the javascript to identify the definition list elements.
(:dltoggleend:) closes the div and calls the main function which loads the javascript code and stylesheet.

Between these two markups any definition list element is treated with a toggle button. This makes it possible for instance to have several lists, divided by subheaders, like on the cookbook page.

Javascript and css code gets loaded only when (:dltoggleend:) markup is present.

Edit the css file to load different plus and minus button images etc.

Release Notes

  • 2006-10-28: Added $RecipeInfo
  • 2006-08-09: Fixed <p> </p> tags around <script>.
  • 2006-04-11a: dltoggle.zipΔ New file locations. Reworked code to allow for multiple lists. New start and end markup. Added variable for tooltip, internationalised ( Show/hide the answer ).
  • 2006-04-11: TJK_ToggleDL.zipΔ 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

  • ShowHide
  • UnToggle - A show/hide switch where the contents is visible even for browsers with JavaScript disabled.

Contributors

Comments

See discussion at FAQToggleList-Talk

User notes? : 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.