Pure CSS Hide and Display Content

EXAMPLE OF FINISHED PRODUCT

  • Home

    • Home 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.

  • About
    • About 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.

  • 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

      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.

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.

About Author:

I work as a full time frontend web developer at ISITE Design located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

Follow Me:
TwitterFacebookGoogle Plus

42 Responses to “Pure CSS Hide and Display Content”

  1. Renu says:

    It is really helpful to me. Like the way u in which u hv described this.
    Thanks

  2. pradeep says:

    Brilliant, appreciate your effort. thanks for sharing…

  3. Lilly P says:

    I’m having issues trying to adjust this code so that the navigation bar spans the entire 960px of my page and each title cell is evenly distributed and centered. Any ideas what specifications I should make sure to change?

  4. keval says:

    Thank you :)

  5. Robert says:

    This is great! I’m trying to get it to show a list, like a menu
    option 1
    option 2

    but what I’m getting is
    option 1 option 2

  6. James Robinson says:

    What if my menu is at the bottom of my page, and I want the content box to display from the top of the hovered select upward???

  7. mvijayanand says:

    wounderful site.. thx for ur help.. and i like ur page creaion.. its nice to see

  8. Frinley says:

    Really useful for me! Thanks brother….

  9. Gustaf P says:

    Hi!

    When i try to add another content every content just going “ofudbfusdfosf” just totally chaos, can you upload the code with 6-7 contents? :) Should really appreciate that.

  10. sydney says:

    Hi Devon.
    Nice tutorial, however I would like the “home” etc..to be vertical along the left..how would I do that?
    I am pretty new at this, so if you could explain in detail in your reply I would greatly appreciate it.

    Thank you from a senior newbie.
    Sydney

  11. Lucas says:

    Hi,
    I hope this is something I was looking for :) I need to have an events calendar on a website that will appear in exactly this way (as on tab only). It’s going to be powered by WordPress. Have you tested it with dynamic content by any chance? If you have any suggestions that would be great :)
    Many thanks!

  12. Kyle says:

    Only issue I am having is when using this script on a iPad or iPhone. When you click the link you see the content but there is no way for the content to go away after words. You can choose the other categories so see their content but you can’t get rid of the content due to the fact there your using a tablet touch screen. Is there any way to add a link within the content to act as a Close?

  13. Edward says:

    Very useful, thank you very much!

  14. irvan fansuri says:

    thank you for nice tutorial, i need change the button to vertical, how i change it?

    Thanks and Regards Irvan

  15. Justin says:

    Great tutorial. Thank you!

    Quick question: I am using a ul li instead the one that hovers, but the bullets won’t appear! Can you assist me with this?

    Thanks.

    • @Justin – You needed to apply a list-style:none; to your ul and the bullets will be removed. Also note that there is browser default margins and padding applied to ul and ol elements.

      Good luck.

  16. Ernie Boynton says:

    Thank you very much for sharing your knowledge. Your tutorial is first class – Great work Mr.Olsen.
    I am very much a novice in web design and in particular css, but working through you tutorial has given me inspiration to do some css experimenting.
    Thank you and kind regards

    Ernie

  17. Chris Rabkin says:

    Hey
    This is really cool! Im having trouble implementing in ie 8.
    The code structure works in FF, Chrome and Safari but in ie 8 the first part of the unorderd list shows but the second part appears on the page- heres a link to show you http://72.52.206.17/~guerilla/category/vlog/

    i need some help – Ive played around with structure, and css but cant seem to get it ie 8 working.

    thanks

  18. AJ says:

    How would you go about making the menu vertical instead of horizontal?

  19. Robert says:

    This is a great script. I have one question though, how can I have the contents of the Home Box appear when the page loads. Since its the homepage, the home content should be there by default.

    Thanks!

  20. Hello.

    I need to implement this effect on our online annual report soon.

    Can the revealed content be placed to the left, of say an image for example?

    I plan to have an image of Board Members with their names below it and when users hover over their link name the content about them will show to the right of the image.

    Please respond with advice on this (-: Thanks for your time and love the site design

  21. Michael says:

    Script is broken in OSX 10.6: Chrome 8.0.5. Displays scrollbars around the hidden div elements.

  22. I am brand says:

    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!!!

  23. Ben says:

    The above demo doesn’t work on FF 3.6.8

  24. [..] A little unrelated, but I totally liked this site post [..]

  25. dick says:

    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?

  26. k says:

    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!!!

  27. Devin R. Olsen says:

    @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.

  28. Devin R. Olsen says:

    @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

  29. anand says:

    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.

  30. Devin R. Olsen says:

    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.

  31. Denis says:

    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.

  32. Devin R. Olsen says:

    Thanks David S, miss print issue has been resolved.

  33. David S says:

    in the fourth blue box down, where the code is laid out in full, the

    line is missing! This fooled me for 30 minutes until I worked it out.
  34. helpfull hand says:

    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]

  35. Mixed brains says:

    Thanks for the hint. I did not see it at first. THis is really cool and just what my boss is looking for.

  36. Devin R. Olsen says:

    @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.

  37. helpfull hand says:

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

  38. Jay Harper says:

    Thank you! You saved the day!

  39. Devin R. Olsen says:

    I always enjoy feedback from my readers.

Leave a Reply