ID: 187

	[x] Attachment Details

Hide/show html elements using CSS and Javascript

quincydude

Posted on 11/20/08 at 4:37 PM

0 of 1 members found this article helpful

Sometimes, web designers want to do some "fancy" stuff on their pages, for example, toggle and allow the display of certain elements (say a form, or pictures).It not only provides fancy feeling to users, but could also make them feel a clear and simple layout. And here's how you do it.

In CSS, the style "display" can be applied to all html elements. It allows a wide set of values but what we concern today is "display: block" and "display:". Setting the value block allows an element to generate a principal block box, in other words, it will be shown. Setting it to none do the opposite, this value causes an element to generate no boxes in the formatting structure, i.e, the element has no effect on layout. You may get the idea at once and know what you have to do is to switch the display style's value, or switching the class of an elements belongs. For the latter approach, you can define something like

1:
2:
3:
4:
5:
6:
7:
8:
9:
<style>
.open {
	display: block;
	}
.closed {
	display: none;
	}
</style>

But you have to switch the status at runtime, so the help of javascript is required.
Say, you have a div that wanted to be shown if user have checked a box, then you can do the following

1:
2:
3:
4:
5:
6:
Enable div ? <input type="checkbox" name="enableDiv" onclick="this.checked?document.getElementById('mydiv').className='open':document.getElementById('mydiv').className='closed';"/> 
<div id="mydiv" class="closed" style="border:1px solid #A0A0A0;height:50px;width:80px;" >
<!---contents here -->
I m here!
</div>

By clicking the checkbox, the div will be shown/hide according to the checkbox's status.

Here's another example that use this technique, but this time it behaves like the folder list in file managers. Sublists can be expanded or collapsed upon user clicking the expand/collapse box.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
	
<script language="JavaScript">
	
function toggle(id){
    ul = "ul_" + id;
    img = "img_" + id;
    ulElement = document.getElementById(ul);
    imgElement = document.getElementById(img);
    if (ulElement){
            if (ulElement.className == 'closed'){
                    ulElement.className = "open";
                    imgElement.src = "collapse.gif";
                    }else{
                    ulElement.className = "closed";
                    imgElement.src = "expand.gif";
                    }
            }
    }
	
</script>
	
<style>
	
.open {
	display: block;
	}
.closed {
	display: none;
	}
li {
	list-style-type: none;
	padding-top: .2em;
	padding-bottom: .2em;
	}
        
li img {
	vertical-align: middle;
	}
	
</style>
	
</head>
<body>
	
<ul class="open">
    <li id="item1"><a  onclick="toggle('item1');"><img src="expand.gif" alt="" id="img_item1" border="0"></a>Item 1
                  <ul id="ul_item1" class="closed">
                          <li id="item1_1"><img src="solid.gif" alt="" border="0">Item 1.1</li>
                          <li id="item1_2"><img src="solid.gif" alt="" border="0">Item 1.2</li>
                  </ul>
    </li>
    <li id="item3"><a  onclick="toggle('item3');"><img src="expand.gif" alt="" id="img_item3" border="0"></a>Item 3
          <ul id="ul_item3" class="closed">
                  <li id="item3_1"><img src="solid.gif" alt="" border="0">Item 3.1</li>
                  <li id="item3_2"><img src="solid.gif" alt="" border="0">Item 3.2</li>
                  <li id="item3_3"><img src="solid.gif" alt="" border="0">Item 3.3</li>
                  <li id="item3_4"><img src="solid.gif" alt="" border="0">Item 3.4</li>
                  <li onclick="alert("hi");" id="item3_5"><img src="solid.gif" alt="" border="0">Item 3.5</li>
          </ul>
    </li>
    <li id="item4"><a  onclick="toggle('item4');"><img src="expand.gif" alt="" id="img_item4" border="0"></a>Item 4
          <ul id="ul_item4" class="closed">
	
          </ul>
    </li>
</ul>          
	
</body>
</html>