This is the demo of the CSS hides and display method. Here we are going to learn how to create this pure CSS hide and display method step by step in order to give you the reader a better idea of the whole process in creating your very own content hide and display areas. Let’s start off with our standard XHTML document.

Let’s start by building our html structure first. Start out with a blank html document like this.

HTML Code

[cc lang=”php”]

[/cc]

CSS Code

[cc lang=”css”]
body {
width:100%;
behavior:url(cssHoverFix.htc);
}

#contentBox {
width:80px;
height:90px;
float:left;
background-color:#0F9;
padding:10px;
}
.imagediv {
width:80px;
height:20px;
margin:0px 0px 10px 0px; padding:0px;
cursor:pointer;
background-color:#39C;
}
#contentBox .hidediv {
left:0px;
display:none;
z-index:100;
width:80px;
height:50px;
margin:0px;
background-color:#336;
float:left;
}
#contentBox:hover .hidediv {
display:block; top:0px; left:8px;
}
[/cc]

For Demo Visit Here

First create main container div which will contain “hidediv” div and one “imagediv” div. Whenever user hover this container div then “hidediv” div will be open.

You can change you hide/show as per your requirement with normal css changes.

Notes : In this demo cssHoverFix.htc file used for ie6 hover bugs, so whenver you used this code please put this files in your root folder.

For Demo Visit Here