Recent Changes - Search:

Cookbook

PmWiki

pmwiki.org

UnToggle

Summary: An unobtrusive show/hide toggle switch.
Version: 20090311
Status: Beta
Maintainer: Petko
Categories: Layout Links
Discussion: UnToggle-Talk
License: PD

Description

A show/hide switch where the contents is visible even for browsers with JavaScript disabled. The script usage in a wiki page is also very simple.

To install the recipe:

  • copy untoggle.js to your (farm's) /pub/ directory.
  • add to local/config.php these lines:
    $HTMLStylesFmt['untoggle'] = '.clicker { color:blue; cursor:pointer; }';
    $WikiStyle['toggle'] = array('apply' => 'item', 'class' => 'toggle');
    $HTMLFooterFmt['untoggle'] = '<script type="text/javascript" 
       src="$FarmPubDirUrl/untoggle.js"></script>';

Make sure your skin template has the required marker <!--HTMLFooter--> before the closing </body> tag.

In a wiki page, a "toggle" switch can be either a "div" block, or a term in a definition list. And you just need to add to them the "toggle" class. The very next HTML element will be hidden/shown:


>>toggle<<
Click here for more info.
>>indent<<
The div with class "indent" is the block right after the "toggle" switch, and it will be hidden or shown.

It can contain several paragraphs, tables, images and other elements, but it is '''exactly''' the '''first''' element '''after''' the toggle block.
>><<

Click here for more info.

The div with class "indent" is the block right after the "toggle" switch, and it will be hidden or shown.

It can contain several paragraphs, tables, images and other elements, but it is exactly the first element after the toggle block.

Example with a table right after the toggle block:


>>toggle<<
Here is another toggle switch.
>><<
|| border=1 width=400
|| a || b || c || d ||
|| 1 || 23 |||| 4 ||
|| This table is the element '''exactly after''' the toggle div above ||||||||

Here is another toggle switch.

abcd
1234
This table is the element exactly after the toggle div above

Example with a definition list:


: Term %toggle% : Toggling definition
: Another term %toggle% : Another folding definition
: A normal term : This will allways show
: Once again %toggle% : Another hidden definition.
Term
Toggling definition
Another term
Another folding definition
A normal term
This will allways show
Once again
Another hidden definition.

Notes

A reader needs a recent browser with JavaScript enabled to use the "toggle" functionality. If it is not the case, all the content will simply be shown unfolded to the user.

Release Notes

  • 20090311 : first public release.

See Also

Cookbook /
FAQToggleList  Adding toggle buttons to a definition list (stable)
ShowHide  Adds toggle buttons and links to show/hide sections and objects. Superseded by Toggle. (deprecated)
Toggle  Adds links or buttons for toggling (hiding/showing) div sections and objects (stable)
ToggleHide  Add links to toggle display of html block elements (Stable)

Author

A recipe created and maintained by Petko based on JavaScript examples by BonRouge.

Comments

See discussion at UnToggle-Talk

Sandbox

The recipe is enabled on this page, feel free to experiment below.

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.

Edit - History - Print - Recent Changes - Search
Page last modified on July 19, 2014, at 12:55 AM