Hide / Display Elements

Javascript Tutorials

Tutorial

Click on thumbnailed images to enlarge

BEFORE YOU READ ON, THE FOLLOWING BASICS ARE REQUIRED:

1) Know how to change display attribute using CSS
2) Know how to apply if-else operators
3) That's it :)

This is a very useful javascript that toggles the display attribute of almost any html elements! Check out the online demo @ http://bottie.org/php.php?feed=scribble&readscribble=JavaScript%20Hide-Display%20Elements)

<script type="text/javascript">

function toggledisplay(el){

// by bertoni moretti @ bottie.org

if(document.getElementById(el).style.display == "none"){
document.getElementById(el).style.display = "block";
}else{
document.getElementById(el).style.display = "none";
}

}
</script>


BEFORE USING THIS SCRIPT:
Make sure to set the attribute of your targetted element as "display: block;" or "display: none;". Depends on what it should look like first.

Note that the word "el" is put in between the brackets to indicate a global variable, meaning that you can dynamically change the value of "el" anytime / anyhow you want. For this script, the purpose is to use "el" for the targetted element's global ID.

How does it work? We use the if-else operator, so the script literally says, "if the current element's state displays nothing, then display something onclick, otherwise revert".

Tutorial Comments

Showing latest 1 of 1 comments

there's a correction to the script, be sure to change "d" to "document"

By birdman on Mar 29, 2006 9:31 pm

Tutorial Details

Author birdman View profile
Submitted on Mar 29, 2006
Page views 39,136
Favorites 5
Comments 1

Tutorial Tags