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 currently working at a leading web development company as a Sr. PHP Web Developer. He is the founder of the Xpert Developer. He has completed B.E. in Information Technology. Born and brought up in Ahmedabad. He loves to code and coding is all about passion for him. Follow him on twitter at Avinash Zala & Xpert Developer.

View all posts by: