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 WikiEngineer a resource for engineers everywhere.
Examples
(:showhide div=box1 init=hide lshow='Show Solution' lhide='Hide Solution':) >>id=box1 border='2px 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 div=box2 lshow='Show Solution ▼' lhide='Hide Solution ▲':) >>id=box2 border='1px solid #999' padding=5px bgcolor=#fed<< The text in this section can be hidden/shown >><< |
The text in this section can be hidden/shown |
Nested toggled divs:
(:div0 style='width:540px; border:1px solid #999; padding:5px;
background-color:#def':)
(:showhide init=hide div=div1 lshow='Show Divisions' lhide='Hide
Divisions':)
(:div1 id=div1 :)
(:showhide init=hide div=div11 lshow='+' lhide='-':) First Division
(:div11 id=div11 style='width:500px; border:1px solid #999; padding:5px;
margin-left:25px; margin-bottom:10px; background:#fed':)
First div content
(:div11end:)
(:showhide init=hide div=div12 lshow='+' lhide='-':) Second Division
(:div12 id=div12 style='width:500px; border:1px solid #999; padding:5px;
margin-left:25px; margin-bottom:10px; background:#fed':)
(:showhide init=hide div=div121 lshow='+' lhide='-':) Second First
Division
(:div121 id=div121 style='width:460px;border:1px solid
#999;padding:5px;margin-left:25px; margin-bottom:10px; background:#ffd':)
Second First Division content
(:div121end:)
(:showhide init=hide div=div122 lshow='+' lhide='-':) Second Second
Division
(:div122 id=div122 style='width:460px;border:1px solid
#999;padding:5px;margin-left:25px; margin-bottom:10px; background:#ffd':)
[++{$ \sqrt{n^2} $}++]
(:div122end:)
(:div12end:)
(:div1end:)
(:div0end:)
|
Nested toggled divs:
First Division First div content Second Division Second First Division Second First Division content Second Second Division \sqrt{n^2} |
Multiple (:showhide div=... :) or (:toggle div=... :) markups are possible on a page, to create multiple toggle buttons for switching various sections independently.
Necessary parameter:
- div = divisionname name of division which the toggle button acts on
Optional parameters:
- init = hide hides the division initially (default is show)
- lshow = labelname label of button when div is hidden (default is Show)
- lhide = labelname label of button when div is shown (default is Hide)
- div2 = divisionname name of an optional second div which the toggle will show when hiding the first div, toggling between the two divs.
- set = 1 remember toggle state with a cookie (ToggleLink only)
config.php parameters
- Arrays $ShowHideConfig and $ToggleLinkConfig for setting defaults.
The buttons have css style hooks inputbutton and showhidebutton.