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

Toggle

Questions answered by this recipe

How can I add toggle switches to show and hide sections of the page?

Description

The script adds markup for links, buttons or images for toggling (hiding/showing) div sections and objects

Download toggle.phpΔ and copy to cookbook folder. Install by adding to config.php:

Toggle button examples: Short syntax:

(:toggle hide box1 button=1:)
>>id=box1 border='1px solid #999' padding=5px bgcolor=#edf<< 
The text in this section can be hidden/shown 
>><<

Long syntax:

(:toggle id=box2 init=hide button=1:)
>>id=box2 border='1px solid #999' padding=5px bgcolor=#edf<< 
The text in this section can be hidden/shown 
>><<

Toggle link examples:

(:toggle box3:)
>>id=box3 border='1px solid #999' padding=5px bgcolor=#fed<< 
The text in this section can be hidden/shown 
>><<

(:toggle hide box4:)
>>id=box4 border='1px solid #999' padding=5px bgcolor=#fed<< 
The text in this section can be hidden/shown 
>><<

(:toggle box5a box5b:)
>>id=box5a border='1px solid #999' padding=5px bgcolor=#fed<< 
Toggle between two divs. First div.
>>id=box5b border='1px solid #999' padding=5px bgcolor=#edf<< 
Some text in second div.  
>><<

Necessary parameter:

• id = divname name of division or object which the toggle link or button acts on

Optional parameters:

• init = hide hides the division initially (default is show)
• show = labelname label of button when div is hidden (default is show)
• hide = labelname label of button when div is shown (default is hide)
• label = labelname label of link or button for both toggle states (setting the show to be the same as the hide label)
• id2 = divisionname name of an optional second div or object which the toggle will show when hiding the first div, toggling between the two divs or objects.
• set = 1 remember toggle state by setting a cookie
• button = 1 display a button instead of a link

Shortcut syntax:

You can avoid some of the parameter keywords and use keyless arguments in the markup instead.

• (:toggle divname:) same as (:toggle id=divname:)
• (:toggle hide divname:) same as (:toggle init=hide id=divname:)
• (:toggle hide divname button:) same as (:toggle init=hide id=divname button=1:)
• (:toggle name1 name2:) same as (:toggle id=name1 id2=name2:)

Labels

For custom labels set labels with parameters show= or hide= (or label= for one 'show' and 'hide' label).
Single quotes (apostrophes) in labels should work now.

Images as toggles

You can have images displayed instead of link text. Use the image file name with extension as label text, like show=myshow.gif hide=myhide.gif. Then clicking the image will toggle the div display, and if you use different images for show and hide these images will toggle as well.

Images should be attached to the page (use action=upload to upload file to page or group). Syntax like label=Attach:myimage.ext Δ does not work. If your uploaded image file is attached to a different group, for instance it is uploaded to the 'Site' group, then use syntax like show=Site/myshow.gif. - The toggle markup recognises images with extensions png, gif, jpg, jpeg and ico. If there are problems with uploading such images, make sure you follow all the advice about uploading images and necessary permissions are set.

config.php parameters

• Array $ToggleConfig for setting defaults.

Backward compatibility

The script is backwards compatible with the togglelink markup syntax. lshow= works same as show= parameter, lhide= works same as hide= parameter, div= works same as id= parameter, div2= works same as id2= parameter. Buttons are implemented with a button=1 parameter, and work that way like ShowHide Buttons.

This recipe supersedes the ShowHide and ToggleLink scripts.

Notes

The script requires a javascript enabled modern browser. It places a javascript function into the html body, which will achieve instant toggle effects without page reloads.

A toggle button can act on any named division of the page, even a sidebar or other structural division outside the normal page content. But in such a case it may not make a too good job, because to hide such a div effectively may need more than applying display:none, for instance resetting of margins.

A toggle button can also act on other objects with an id= set, for instance tables. It is not restricted to divs.

A toggle button or link can toggle two divisions or objects, hiding one and showing the other, alternating. Name the first division or object id with id=... and the second with id2=...

Two toggle buttons or two toggle links can act together as a pair on one div. For instance put one on top of the div, and the other inside at the bottom, to conveniently close it. But note that the label or link text of the second one will be displayed on the first one when clicked, so use the same labels for both. And if the div shall be initially hidden, place init=hide into the first markup and not the second.

Release Notes

• 2009-07-23: fixed bug preventing initial state in sidebar. Fixed bug in cookie name.
• 2009-03-09: added image option
• 2009-03-06: initial release, as an upgrade to ShowHide and ToggleLink scripts, combining both, and expanding the syntax.
  Changes from Showhide/ToggleLink:
  Disbanded showhide and togglelink markup in favour of new (:toggle ... :) markup. Fixed single quotes in labels. Added button=1 parameter. Changed parameter names, but the old ones should still work. Added shortcut parameter syntax. Tidied up javascript.

See Also

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

Comments

See discussion at Toggle-Talk

* (+) Optional positive comment. Name, date
* (-) Optional negative comment. Name, date