FAQ : How to toggle visibility of an html element by javascript
In my previous post, I discussed how we can change the style and/or css class of any html element by JavaScript. We can take advantage of this feature to add functionality where visibility of elements can be toggled. That means clicking a button will change the state of that element from visible to invisible and vice-versa.
The css property that we will manipulate to achieve this behavior is “display”. Below is the html we will use for the example.
<html> <head> <title>Toggle elements</title> <script type="text/javascript" language="javascript"> </script> </head> <body> <div style="border:2px solid;"> <p><input type="button" onClick="toggleMe('toggleHolmes');" value="Click to toggle"/></p> <p id="toggleHolmes" style="display:block;"> I consider that a mans brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber of every sort that he comes across, so that the knowledge which might be useful to him gets crowded out, or at best is jumbled up with a lot of other things, so that he has a difficulty in laying his hands upon it.<br/> -Sherlock Holmes (A Study in Scarlet - Part 1,chap. 2) </p> </div> <br/> <div style="border:2px solid;"> <p><input type="button" onClick="toggleMe('toggleNietzsche');" value="Click to toggle"/></p> <p id="toggleNietzsche" style="display:block;"> God is dead. God remains dead. And we have killed him. How shall we comfort ourselves, the murderers of all murderers? What was holiest and mightiest of all that the world has yet owned has bled to death under our knives: who will wipe this blood off us? What water is there for us to clean ourselves? What festivals of atonement, what sacred games shall we have to invent? Is not the greatness of this deed too great for us? Must we ourselves not become gods simply to appear worthy of it?<br/> -"The Madman" (Thus Spoke Zarathustra by Friedrich Nietzsche) </p> </div> </body> </html>
There are 2 paragraphs with ids “toggleHolmes” and “toggleNietzsche” which contain some text. Above each of them is a button. Onclick of each of those buttons we have called a function toggleMe which accepts the id of the element which is to be toggled as its parameter.
Now include the following JavaScript code between the script tags in above html.
function toggleMe(id) { var element = document.getElementById(id); if(element.style.display == "none") { element.style.display = "block"; } else { element.style.display = "none"; } }
Let us analyze it. Function toggleMe gets the id of element.Here we follow the following steps:
Check whether the display property of element is already set to none.
If it is none we need to change it to block.
Otherwise it is visible and therefore we set it to none.
Now go ahead and click the button. Clicking button will make the respective paragraph visible and hidden alternatively.
In case you are interested these all lines of toggleMe function can be replaced by a single line. The magic of Conditional Operator 
element.style.display = (element.style.display == "none") ? "block" : "none";
Above example can be seen in action at http://vijayjoshi.org/examples/toggle.html
Related Posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
