• View
• Edit
• History
• Attach
• Print
• Backlinks

UnToggle

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.
>><<

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
||||||||

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.

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

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.