Pure CSS Hide and Display HTML Elements without Javascript

  • Avinash
  • 5
  • Dec 08, 2010
  • Web Design

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

<div id="contentBox">
        <div class="imagediv"></div>
        <div class="hidediv"></div>
    </div>

CSS Code

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; }
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;
}

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

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: