This page uses a collapsible descriptive list containing tables of information.
The <dl> could be replaced with <div>s or any other block element.
The <dd> is shown and hidden by applying the classes .showSwitch (display:
block) and .hideSwitch (display: none) with Javascript. The state of the elements
is recorded in a cookie so that each time the page is visited the menu appears
as it was left. with cookies disabled the menu is reset on each visit.
To use this script with your own menu:
-
edit 'menus_array'. this array should contain all your show/hide element ids.
eg. if the name (id) of the div you want to show/hide is 'divOne' add 'divOne'
to the array.
ensure that these styles are in your CSS:
.showSwitch {
display: block;
}
.hideSwitch {
display: none;
}
add:
onload="resetMenu();"
to the <body> tag. this reads the cookie
and sets the menu elements.
add this event to the open/close trigger/button for each show/hide element:
onclick="showHideSwitch('NAME(ID) OF ELEMENT AFFECTED')"
Apply the class .hideSwitch to all show/hide elements.
This script also swaps an image when elements are opened and closed (plus
and minus in this example). If you don't want these images remove these lines:
button_id.setAttribute ('src', img_close);
button_id.setAttribute ('src', img_open);
from function showHideSwitch and function resetMenu.
View source or save this page for more information.
[Home] [Support]
IT-
- Legal & Financial
-
- Mining & Minerals
-
- Energy
-
- Chemicals
-
- Construction
-
- Aviation
-
- Services
-