Advanced Bulleted-List Menu - Adding JavaScript
(Page 5 of 7 )
For the JavaScript, all we need is a simple toggle function to hide or display content. Since this code is so small, I won't bother storing it in an external file. In fact, I think you'll get JavaScript errors if you try to store it in an external file anyway.
<script type="text/javascript">
<!--
function toggle(id) {
if(document.getElementById) {
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
// -->
</script> |
The function verifies the getElementById method exists so the script degrades nicely in older browsers. If everything is good, it uses the method to isolate the element passed to the function and toggles the display style associated with it.
To implement a call to the JavaScript function, a set of div tags with an id attribute should wrap the stuff to toggle and the a tag’s onclick attribute should call the function. Calling the toggle function with that id effects whatever content is enclosed within the div.
<div id="test">
<a href="#" onclick="toggle('test');">hide me</a>
</div> |
When the user clicks the link, our JavaScript toggle function will be called and change the div’s display style affecting the contents within it. Pretty nifty, aye?
Next: Drawing Our Menu >>
More Navigation Usability Articles
More By notepad
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
