Subject: PmWiki

Show Hide Box

The show hide box is meant to be used for: solutions to problems, flashcard answers, or general testing practices. Below you will find a few examples of how to use the show/hide box.

This is an effort to further make math^2 a resource for engineers everywhere.

Examples

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

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

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

Hide

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

Show

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

Hide

Toggle between two divs. First div.

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.


This page may have a more recent version on pmwiki.org: PmWiki:ShowHideBox, and a talk page: PmWiki:ShowHideBox-Talk.