Show and Hide Elements with JavaScript
One of the benefits of JavaScript is that it can be easily used to manipulate elements on a page without having to refresh or fiddle with complex server-side languages. For example, imagine you have a page of frequently asked questions — you won’t necessarily want all of these to appear at once, so we can hide them with CSS and use JavaScript to show them on demand by manipulating the styling.
The easiest way to hide an element is to set the style attribute to display: none;. The content is still there, but hidden away. Using the example of a FAQ list, we’d construct our question and answer something like this (notice the style on the <span> to hide the question):
<p><a href="#">What price are your apples?</a><br> <span id="answer1" style="display: none;">Our apples are 30 pence each. If you buy 10 or more we can sell them at a discounted bulk rate of 25 pence each.</span></p>
Next we need to create the JavaScript function that when activated will show our content (in this case, the answer to our question). To do this we use the popular getElementById(), which will allow us to manipulate HTML elements based on their id (note that we gave our first answer an id of ‘answer1′). Once the JavaScript function knows which element we want to play with, we can tell the function to give it a “block” style, which will display our question on the page. The code looks just like this:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
Now that we’ve built the function, we can apply it to our page with the onclick event handler so that the JavaScript function knows that when the question is clicked, we apply the showStuff() function:
<p><a href="#" onclick="showStuff('answer1'); return false;">What price are your apples?</a><br>
<span id="answer1" style="display: none;">Our apples are 30 pence each. If you buy 10 or more we can sell them at a discounted bulk rate of 25 pence each.</span></p>
Build the JavaScript, question and answer code into one page and we have a working example:
<html>
<head>
<title>my javascript show script</title>
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
</head>
<body>
<p><a href="#" onclick="showStuff('answer1'); return false;">What price are your apples?</a><br>
<span id="answer1" style="display: none;">Our apples are 30 pence each. If you buy 10 or more we can sell them at a discounted bulk rate of 25 pence each.</span></p>
</body>
</html>
For each question we want, we’d give the <span> a new id, and show the answer using the showStuff() function (don’t forget to place the id of the answer <span> between the showStuff() brackets, in single quotes: ”).
What if I want to hide the answer again?
Easy enough — we simple reverse the effect of the function with a new function, which resets the styling back to display: none;. The code for this is as follows:
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
We would then apply that to an element in the same way as we would showStuff() (don’t forget it’s called hideStuff()!), including the id of the element we wish to hide in the brackets.
15 Comments to “Show and Hide Elements with JavaScript”
Leave a Reply
You know this is the clearest and most straight forward example i have seen, i have this basic same thing in four different functions in my code, the 5th is not working and i was just tryign to see why…. great job and site,
GuyWhoCodesWithAchainSaw
I wish you’d show an example of the “showstuff” & “hidestuff” together in the body.
thanks
[...] link. These are some of the things I’m most excited about! I adapted a super cool script from Girls Who Geek (who, incidentally, use the same theme for their blog as me)! When you click on “about” [...]
Thank you so much. Very easy to understand. Though i just cant understand out to apply the hideStuff.
set an onmouseout handler
K.K, did you figure out how to hideStuff
Great tutorial, just wanted to add this. To show and hide you just need to find out the status of the display.
if(document.getElementById(id).style.display == ‘block’){
document.getElementById(id).style.display = ‘none’;
} else {
document.getElementById(id).style.display = ‘block’;
}
I’m trying to remember how to remove the element and the space it would take up if it were there. Could your show an add-on example of removing and maintaning the spacing of the element?
Some text hidden text ending text.
In one case: Some text [hidden but space maintained] ending text.
Other case: Some text ending text.
Wow, this is exactly what I needed. I thinking about using AJAX and imagining the most complicated things to do, and this was extremely easy! Thank you so much. Because of this great article I am going to have a link on my website to this fabulous web resource!
Thanks for this!! :)
Hi there, I think I may finally be getting this, but I’m still tripped up on how to apply the hide stuff function. I can’t have two onClick events, so where do I place the hideStuff code? Thanks!
Thanks a lot- it’s a nice example, which is very easy to understand.
Is it possible, to combine both (the show and hide) in one link?
I like to have a link, which is used to open and close/ hide a div-element without having a second link for the hide function.
Greetings Tobias
Thanks for that short & clear solution!
thanks for the example. really helpful…
Works well. But I have a problem. Imagine that on one page I want to make a link to question #5 on FAQ page. So if I click on link on one page, I would like to be transferred to FAQ page and have question #5 shown (or other hidden). Can you do that? Many thanks for help.