The basic Show/Hide JavaScript
Concept
By Dan Page
Published: February 14, 2011
One of the most common tasks in JavaScript is to show or hide an element.
The proces generally uses an event to trigger a function which changes the
CSS display property of the target element.
It works like this:
The web page has an element (call it the target element) such as a div, span,
paragraph, etc, which has a style rule of display = block or none.
The page also has a link or button with an event (such as onclick) that fires
a javaScript funtion that changes the target elements rule from whatever it
is (block or none) to whatever it is not (block or none) - a toggle.
Look at the following code sample to see how it works...
Simple Code For Show/Hide
Using the Show/Hide JavaScript in a menu
(Step 1) The base files - HTML/CSS
By Dan Page
Published: February 14, 2011
The first part of this exercise will be to quickly build a web page
that will serve as a template for building a show/hide menu. In this case
we will use the StreeLife web page. The code is shown below. Simply copy
the code and paste it into a new HTML page.
The code is found here.
Simple Code For StreeLife
Using the Show/Hide JavaScript in a menu
(Step 2) IF THEN ELSE
By Dan Page
Published: February 14, 2011
In the first example you want to use a conditional test on a specific id to
see if it is one of the menu items(div1, div2, div3, or div4).
The “wichObject” parameter is passed by the trigger
event in the hyperlinks on the menu (also the onload event)
to the function. The function checks to see if the object is found.
IF the object is found THEN it is shown
or made visable (in css this is a “block”)
by changing its css display style, and all other menu
items objects have their display style hidden. Otherwise,
(ELSE or ELSE IF) if the div id is not found in the first
IF condition then the
object is checked against the next if statement, and so on...
Instructions for this script is found here.
Code For IF/ELSE Menu
(Don't forget the onload event trigger... otherwise your divs
will still be hidden when the page loads)
Using the Show/Hide JavaScript in a menu
(Step 3) Switch/Case
By Dan Page
Published: February 14, 2011
The Switch/Case condition is similar to the IF/THEN condition except that
you set up each case to compare to a switch condition.
First set up the switch. This can be the object you are
looking for (such as the whichObject parameter).
Next set up as many cases as you want to compare to.
The case should begin with the word case
followed by a space and then the value you are looking for
'div1'
followed by a colon ":".
case 'div1':
Below the case add all of your code that needs to be run.
At the end of each case,
you need to add a break (because you don't need to look any further
once your case is found).
Instructions for this script is found here.
Code For Switch/Case Menu
Using the Show/Hide JavaScript in a menu
(Advanced) Loop the nodeList Example
By Dan Page
Published: February 14, 2011
Loop the nodeList Example .
Loop the nodeList Example .
Loop the nodeList Example .
Instructions for this script is found here.
Loop nodeList Example Menu
