Pure CSS Hide and Display Content
EXAMPLE OF FINISHED PRODUCT
-
Home
-
Home Content
Hi welcome to the live demonstration of the content display and hide method of presenting content to your visitors. This method is sometimes also called content switcher because each tab that you hover over displays content that is only relevant to that particular tab.
This is a great way to divide your content up into sections that the user can reference to quickly instead of scrolling through large amounts of content to find what they might be looking for. The best part of this method is that even though the content is dived up into parts for the visitors, the search engines see this content as a whole and have no knowledge that you are running a hide and display method to your visitors. Its the best of both worlds, user friendly and search engine friendly.
-
-
About
-
About Content
Often in web development you find the need to divide your content into parts that is best for visitors and crawlers to find that particular content. One good case of this is a web site navigation menu that only allows for a visitor to see a topics submenu links when the user hovers over that topics button. Or if you have a image gallery and a visitor only sees one image upon hovering over that images thumb nail version. This was my need that brought me to develop this version of a content hide and display.
What makes this method of content hide and display or content switcher is the fact that it uses pure CSS and it is compatible with the following browsers.
IE5.5, IE6, IE7, IE8
Firefox
Safari
I created this method out of need and do not consider it to be the best solution to be found out on the net. However this is my solution that I want to share with you so if you like this method or feel like you might be able to improve this method feel free to do so. Please send me a comment or contact me here and let me know if you have improved or tweaked this method because I am always willing to learn new ways to expand my methods.
-
-
Contact
-
Contact Content
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
FAQ
-
FAQ Content
[Q] Is this a completely pure css method?
[A] In my opinion yes but some might argue because there is a JavaScript .htc file I use in this method. The .htc file is used to fix that 20% of users who still browse with IE6 and below that cant support CSS2 pseudo hover class.
[Q] Well How come we have to use JavaScript if this is a pure CSS method?
[A] IE6 and below do not support pure CSS methods for elements hover states. With the JavaScript .htc file we give IE6 and below the ability to have the pseudo hover class and us to write pure CSS methods. If the visitor to your site is using IE7 and up or any other browser out there this method will work and they will simply ignore this JavaScript .htc file.
[Q] Why should we care about IE6 and below?
[A] Because the percent of users who surf the net with IE6 and below make up of 20% of all internet users. That’s a huge amount of traffic you might want this method to work with as well.
[Q] Ok IE6 and below has 20% of internet users, but what about the people who have JavaScript turned off?
[A] If the visitor is using anything other than IE6 and below then the javascript is ignored and insignificant. The percent of users who surf the net with JavaScript turned off is about 9%. So 9% of that 20% who still use IE6 and below are the ones that this method will not work for.
Say you have 5000 visitors in one day.
5000 – 20% = 1000 visitors who use IE6 and below
1000 – 9% = 360 visitors use IE6 and below with JavaScript Turned off.
Those 360 visitors will be able to view this method if they simply turn on JavaScript.
The rest of the 4640 visitors will be just fine.
-
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 lets go back to our html structure and add a 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 unordered 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 unordered 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 unordered list items “li”.
Our first rule tells our unordered list to have a padding and margin of “0px” to offset the default margin and puddings that come with a unordered 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 realted 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 hoverd 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 lets go back up to our hide and display structure and add our content areas to our unordered list. In order to make our content areas for each hide and display list item we have to build a new unordered 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 unordered 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 unordered 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 unordered 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 unordered list just as our first rule but then points to all listed items. Here we set a 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 unordered 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 unordered list. Here we are saying that whenever a list item from our first unordered 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 unordered 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 befor to break our the bottom border from over our content areas.
We are done folks, you have successfuly created a pure CSS hide and display method!
If you would like a compleate 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 hoverd off entire hide and display elements was in high demand. So I have wrote up a exstended version that uses this above method while also tieing in JavaScript to support the above requested behavior.
You might be suprised how easy the implementation of this support is, so have a read.
This extended version can be found here.
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!!!