UnToggle

Summary: An unobtrusive show/hide toggle switch.
Version: 20090311
Status: Beta
Maintainer: Petko
Categories: Layout Links
Users: +3 (view / edit)
Discussion: UnToggle-Talk
License: PD

Note: see ToggleNext for the core feature, or Block Markup for the (:details summary="Title":) element.

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 always show
: Once again %toggle% : Another hidden definition.
Term
Toggling definition
Another term
Another folding definition
A normal term
This will always 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 /
ClassTags  Markup for Edit-Mode to give a block of content a named class, for use with CSS, JS, or to add content-folding, and lots more! (Stable)
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) elements on a page (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 +3: 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.