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 &#9660;' lhide='Hide Solution
&#9650;':)
>>id=box2 border='1px solid #999' padding=5px bgcolor=#fed<< 
The text in this section can be hidden/shown 
>><<

Hide Solution ▲

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.


Main

Construction

Electrical Engineering

Environmental

General Engineering

Geotechnical

Structural

Transportation

Water Resources

Miscellaneous

edit SideBar