Show/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.
Tags:
javascript, css, getelementbyid,
Last Updated On: 04th June 07 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Friends of 'TT'
Resources