Pure CSS Hide and Display Content
EXAMPLE OF FINISHED PRODUCT
The above is a 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
Next lets add a div box that will act as our navigation bar for each hide and display item.
<body>
<div id="contentBox">
</div>
</body>
We give our div block an id of “contentBox” so we man reference it in our CSS later. Now lets add our style tags to our header in order to give us room to create our CSS.
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> </style> </head>
Ok now that we have our style tags let add our first rule for our div box.
#contentBox {
width:500px;
height:20px;
}
Here we have givin our div box “#contentBox” rule a width and a height in order to contain our hide and display items better.
Next let’s go back to our html structure and add an unordered list to our div box.
<div id="contentBox">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Ok before we begin to add content to our un-ordered list let go back up to our CSS and create a few more rules. Add the following rules to your style tags.
#contentBox ul {
margin:0px;
padding:0px;
position:relative;
width:100%;
}
#contentBox ul li {
display:inline;
float:left;
background-color:#999;
margin-right:10px;
}
Ok what we have done here is stated two new rules both are pointing to first our div box “#contentBox” then to the first un-ordered list it finds “ul”. The second rule is performing the same as the first but it go one step deeper and points to our first un-ordered list items “li”.
Our first rule tells our un-ordered list to have a padding and margin of “0px” to offset the default margin and padding’s that come with an un-ordered list. Next we give it a position of relative in order to contain any elements that have a position of absolute within our unordered list. Our last rule gives our unordered list a width of a “100%”.
Our second rule sets all list items to display inline and have a float of left to align them self’s in horizontal fashion. We give our list items a background color of “#999” but this may be a color of your own choice. Margin right is set to “10px” to give our list items a 10px offset from each other and space things out a bit.
Ok now let go back to our html structure and add some content to our hide and display items. First we must add our title for each hide and display item so within each list item “li” add the following.
<div class="titleCell">
<strong>Home</strong>
</div>
Ok let’s talk about these elements for a second shall we. We are nesting our list item buttons to give our list item buttons a layered hierarchy over our displayed content area with a position absolute style. Basically we are doing this to give visual relevancy to our list items and their content areas, by matching up background colors and breaking are hovered list items bottom border. So once you have your html structure looking like the following go back up to our style tags so we can write two more style rules.
<div id="contentBox">
<ul>
<li>
<div class="titleCell">
<strong>Home</strong>
</div>
</li>
<li>
<div class="titleCell">
<strong>About</strong>
</div>
</li>
<li>
<div class="titleCell">
<strong>Contact</strong>
</div>
</li>
<li>
<div class="titleCell">
<strong>FAQ</strong>
</div>
</li>
</ul>
</div>
Ok in our style tags we are going to create two more rules. One rule if for our new div boxes that have a CSS class reference and the second is for any strong tag related to this CSS class. Add the following two rules to our style tags.
.titleCell {
width:75px;
height:20px;
position:relative; z-index:1000;
margin:0px; padding:0px;
cursor:pointer;
}
.titleCell strong {
font-size:14px;
position:absolute; z-index:1000;
width:73px; height:18px;
text-align:center;
border:#000 solid; border-width:1px;
}
Ok our first rule “.titleCell” is setting width of 75px to give each list item title enough room to fit its name. This width style may be altered to whatever you desire your list item title widths to be except for a width of 100%. Next we set its height to be 20px to match our div box “contentBox” height. The height rule may not be set to 100% and must correspond with our “contentBox” height. Next we set a position of relative and a z-index of 1000 to again give a stopping point for any nested elements who carry a position of absolute from breaking out of our design flow. The z-index is a way to declare a layered rendering hierarchy over other elements who have a lower z-index number than 1000. Next we set our “.titleCell” a cursor style of pointer to change our mouse to a pointer cursor when being hovered over.
Ok our second rule “.titleCell strong” points to any element in our “.titleCell” that’s a strong element. Here we are giving our strong elements a font size of 14px, position of absolute and z-index of 1000. We set the font size for cross browser compatibility and the position of absolute and z-index of 1000 in order break our strong tags out of our design flow and over any displayed content box. Next we give our strong tags a border that’s #000(black) and border width that’s 1px. Because we now have an extra 1px on both sides of our strong tags we set our strong tags width to be that of 2 pixels smaller than its parent “.titleCell” equaling a width of 73px. We again set our strong tags height to be also 2 pixels shorter than its parent “.titleCell” height equaling a height of “18px”. Last we set a text align of center to center our list item titles within our strong tags.
Ok let’s go back up to our hide and display structure and add our content areas to our un-ordered list. In order to make our content areas for each hide and display list item we have to build a new un-ordered list that we will refer to from now on as our “sub unordered list”. Here is what one would look like.
<ul>
<li>
<!-- content here -- >
</li>
</ul>
Ok we place each of our sub un-ordered lists directly in our first unordered list items “li”. Make your entire hide and display structure look like the following.
<div id="contentBox">
<ul>
<li>
<div class="titleCell">
<strong>Home</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>
<li>
<div class="titleCell">
<strong>About</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>
<li>
<div class="titleCell">
<strong>Contact</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>
<li>
<div class="titleCell">
<strong>FAQ</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>
</ul>
</div>
Ok great all that’s left to do is to build our sub un-ordered list styles and visual structure by going back up to our style tags and adding the following CSS rules.
#contentBox ul ul {
position:absolute; left:0px;
display:none;
z-index:100;
}
#contentBox ul ul li {
border:#000 solid;
border-width:1px;
width:500px;
background-color:#FFF;
padding:10px;
}
Ok our first rule is again pointing to our main div box “contentBox” then to our first un-ordered list and then to any sub or rather nested second level unordered list. This sub unordered list receives a position of absolute to break it out of our structured flow and into its parent who was set to a position of relative. Next we set its left style to be 0px in order to assure all content areas are position completely to left when being displayed. Next we set a display of none to always hide our content areas until being told other wise and we also set its z-index to be a 100 or any number lower than 1000.
Our next rule points to our sub un-ordered list just as our first rule but then points to all listed items. Here we set a width to be that of 500px and match our main div box “contentBox” width to completely fill up our desired hide and display width amount. The width style here may not be set to 100% and must match our main div box “contentBox” at all times. Next we give a border of #000 (black) and border width of 1px to give a 1px border completely around our content areas. We also set the background color to #fff (white) and padding of 10px.
Ok we have two more rules we are going to add to our style tags and these rules make up the hover states for each hide and display list item and its content areas. Add the follow two rules to your style tags.
#contentBox ul li:hover ul {
display:block; top:-1px; !important; top:19px;
}
#contentBox ul li:hover .titleCell strong {
border-left:#000 solid;
border-right:#000 solid;
border-top:#000 solid;
border-bottom:#fff solid;
border-width:1px;
background-color:#FFF;
}
Ok our first rule points to our main div box “contentBox” then our first un-ordered list and its list items. Then attached to the list item “li” is a CSS pseudo hover statement “:hover”. After our hover declaration we point to our sub un-ordered list. Here we are saying that whenever a list item from our first un-ordered list is hovered over then we want our sub unordered list to perform the following styles. Here we set our sub unordered list to be finally displayed with a display of block. Next we tell our sub level unordered list to have a top style of -1px to offset our 1px border. Next is a standard IE fix called “!important” and basically we are giving a special top style to all IE browsers that’s 19px or rather 1px less than our 20px height on our main div box “contentBox” due to our 1px border.
Our last rule is pointing to our main div box “contentBox” and then our first un-ordered list and its list items with a pseudo hover class. After the hover class we point to our list item titles “.titleCell” and their strong tags and begin to set styles. Here we are basically making sure our list item titles continue to keep their background color of #fff (white) when hovering over our content areas. We also set a top left and right border of #000(black) and a border bottom of #fff(white) but still keep the border width 1px as before to break our the bottom border from over our content areas.
We are done folks, you have successfully created a pure CSS hide and display method!
If you would like a complete copy of this script please download one here.
I hope this helps someone out as much as it has helped my out. So enjoy!!
Devin R. Olsen
Fixes and Updates
1) Fix CSS Pseudo Hover for IE6 and below here!
NOTE: If you have noticed this method will not work for IE6 and below unless you use the IE pseudo hover fix that can be found here.
2) JavaScript Supported Hide and Display!
After call for our hidden content areas to continue to be displayed, even after mouse has hovered off entire hide and display elements was in high demand. So I have written up a extended version that uses this above method while also tieing in JavaScript to support the above requested behavior.
You might be surprised how easy the implementation of this support is, so have a read.
This extended version can be found here.
I am brand new to all code and am finding your css tutorials extremely helpful. Not everyone knows right off what css even is, does (I didn’t), or the ‘proper’ ways to use it. Your explanations are the best!!!
The above demo doesn’t work on FF 3.6.8
[..] A little unrelated, but I totally liked this site post [..]
Fantastic tutorial!!!
How can I make the display semi-TRANSPARENT so that the image underneath the display can be seen with the display visible on top of it?
I always enjoy feedback from my readers.
Thank you! You saved the day!
Maybe it’s an option to make a seperated page with an example of the result from the tutorial, so users will easily know if this is just what they’re looking for ;-)
@helpfull hand. There should be a demo at the very start of this tutorial. The links that say \”home,about,contact and faq\”. Maybe I should clearly point out its the demo for this tutorial.
Thanks for the hint. I did not see it at first. THis is really cool and just what my boss is looking for.
Ah now i see, but if you first scan the page quickly, you’ll think that it’s just part of the website, not the result of the tutorial, so yeah I think it’s better to make it more clear that it’s the result.
So maybe at the beginning something like:
What we’ll be making
[Example]
in the fourth blue box down, where the code is laid out in full, the
Thanks David S, miss print issue has been resolved.
Thanks a lot for this hint. It’s really awesome. but� How to make that box always visible after hovering? So it wouldn’t dissapear after you move cursor outside the box and dissapearing when you hover the next tab.
Hi Denis, this would require some simple DOM scripting and would not be too hard to implement. Tell you what, because this has been asked more than once by readers I am going to create a tutorial on how to extend this tutorial to include this feature. Reason we would want to extend this tutorial out to this requested feature instead of building a pure JavaScript version is so that if someone has JavaScript turned off it will gracefully fall back to this tutorials version. Please stay tuned to the JavaScript portion of my tutorials. Thanks.
Hi I am anand. Please can you provide me the complete code for the above task. I am really need this. Thanks and Regards, Anand kumar.
@Denis, Ok I have extended this version onto a JavaScript supported version that meets the requested behaviors. Its also setup to work under a graceful degrade back to this original CSS version if a visitor has no JavaScript turned on. Go here to read mor
@anand, the method here at my site for a pure CSS hide and display content had been updated to meet better cross browser compatibility. You may also download a copy in .zip format by going here.
I am brand new to all code and am finding your css tutorials extremely helpful. Not everyone knows right off what css even is, does (I didn’t), or the ‘proper’ ways to use it. Your explanations are the best!!!