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)
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".
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>
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
