<

Hide/show html elements using CSS and Javascript

Published on
11,923 Points
8,823 Views
1 Endorsement
Last Modified:
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

 
<style>
.open {
	display: block;
	}
.closed {
	display: none;
	}
</style>

Open in new window


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

 
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>

Open in new window


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.

 
<!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>

Open in new window

solid.gif
collapse.gif
expand.gif
1
Author:quincydude
Ask questions about what you read
If you have a question about something within an article, you can receive help directly from the article author. Experts Exchange article authors are available to answer questions and further the discussion.
Get 7 days free