Here’s a quick web design tip – how to hide and reveal a div element on a click.
To do this we use getElementById to find the required div and set the visibility to either inline or none.
We do this in a function we’re creating called showdiv – which itself is triggered by a button click.
Here’s the code:
1: <html>
2: <head>
3: <title>How To Hide A div element</title>
4: <style type="text/css">
5: div {
6: position: absolute;
7: top: 80px;
8: left: 15px;
9: width: 130px;
10: padding: 10px;
11: color: white;
12: border: #000000 2px;
13: background-color: #FF0000;
14: display: none;
15: }
16: </style>
17:
18: <script language="JavaScript">
19: function showdiv(id, visibility) {
20: document.getElementById(id).style.display = visibility;
21: }
22: </script>
23:
24: </head>
25: <body >
26:
27: <input type=button name=type value='Show Div'
28: onclick="showdiv('hidden-div', 'inline');";>
29:
30: <input type=button name=type value='Hide Div'
31: onclick="showdiv('hidden-div', 'none');";>
32:
33: <div id="hidden-div">Hidden Div Element</div>
34:
35: </body>
36: </html>
And here’s a link to a demo page
thanks for the post