Recent Changes - Search:

Cookbook

PmWiki

pmwiki.org

FAQToggleList

Summary: Adding toggle buttons to a definition list
Version: 2006-10-28
Prerequisites: pmwiki 2.1
Status: stable
Maintainer: DaveG
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".

Comments

  • I can't seem to get this to work w/either IE or Firefox. :( --GaryV 5/30/06
  • I couldn't seem to get this to work on my wiki until I found that I had NOT put the dltoggle directory in pub. It works now. Thanks Hans :) --BJayaram 5/2/06
 
  • Is it possible to have nested dltoggles?
    Not with this script, sorry! HansB July 31, 2007, at 02:54 AM
  • It seems to work except when it comes to pages with images and pulldown menus inside the <DD>. I have to click on "open all" TWICE before I can see the images and pulldown menus in IE!!! Does anyone know how to solve this issue? Here is the link of the file.(approve links)

See Also

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

Contributors

Edit - History - Print - Recent Changes - Search
Page last modified on March 11, 2009, at 12:36 PM