JavaScript / Pure CSS Hide and Display Content

NOTE: If you have not read or downloaded the pure CSS version, this tutorial will not apply to you. I strongly suggest that you first read or at least download the pure CSS version here, before trying to implement this update.

Ok today I am going to extent our pure CSS hide and display method a little bit and add a few extra behavior controls. Basically I was requested quite a few times to keep displaying our content even after our mouse has hovered off our hide and display elements.

Here is an example of our pure CSS version mixed with Javascript to achieve the above(hover over one of the below tabs):

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

With this script you may have noticed that you are not adding any actual script references to any of our elements, meaning no actual JavaScript resides in our document what so ever.

This is great for search engines that still get confused with JavaScript and even references in elements. Also with no JavaScript references to our elements, we can rest assure that if the user has JavaScript turned off, then our method indeed gracefully degrades back to our original CSS version.

Ok to implement this script and achieve the above version, download a copy this script here.

Once you have downloaded a copy of the script, extract it from the zip file and link it to our desired document’s header with script tags like the following:

%MINIFYHTML4807a7984445488d4d58cebcc2bd33f54%

(src=””) is pointing to the location to where the script file lives either relatively or absolute to the document.

Ok next there are a few variables you are allowed to edit at the begriming of our script that I suggest you take a look at first. The variables range from the name of the main containers id to hover status button background colors and close button text.

var mainContainer = "contentBox"; //ID NAME OF OUR MAIN CONTAINER
var closeBtn = "[CLOSE]"; //CLOSE BUTTON DISPLAYED TEXT
var overColor = "#fff"; //COLOR OF HOVERED TAB
var offColor = "#999"; //COLOR OF CLOSED TAB

Last we want to add one more CSS style rule to our CSS hide display. This rule is for our close button’s style and structure.

.closeBtn{
height:20px;
position:absolute;
top:-20px;
width:100%;
cursor:pointer;
text-align:right;
left:0px;
}

This gives our “close button” a position of absolute in order to break out of our documents structured flow and always be position to the top right of our content hide and display when content is being displayed.

And that’s it everybody, painless no? Good Enjoy!

Devin R. Olsen

Devin R. Olsen

Located in Portland Oregon. I like to teach, share and dabble deep into the digital dark arts of web and game development.

More Posts

Follow Me:
TwitterFacebookGoogle Plus

17 Responses to “JavaScript / Pure CSS Hide and Display Content”

  1. JJ says:

    Please re-upload the file?

  2. Ankit Agrawal says:

    Hii,
    Thanks, It Really helps me alot.

  3. Clem Wilson says:

    This is great code but the link appears to be broken. I’d love to have a look at how it’s integrated, can’t get my brain to wrap itself around it. Any chance the link can be repaired?

  4. Clem Wilson says:

    Fantastic, Id like to see the code working but the link appears to be broken?

  5. Alex says:

    Hi, great tutorial! Like Sarah, the link to the code “http://devinrolsen.com/wp-content/themes/dolsen/demos/javascript/hide-display-content/hideDisplay.zip”
    doesn’t seem to be working correctly. Where can we get it?

  6. Sarah says:

    Hi,
    Thanks for the great tutorial.
    The link to this script does not work.

    hideDisplay.js

    Is it available somewhere else?

  7. John says:

    Good post and thanks for explaining it as it goes along!
    Any chance of correcting the javascript file download link as the link leads to a page that says: ‘requested could not be found, or no longer exists’.
    Cheers!

  8. man van says:

    thanks a lot it helped me

  9. TJ says:

    Thanks, great stuff. However, it seems that the javascript .js/zip file is missing (“could not be found, or no longer exists”). It would be great if you could make it available again.
    Thanks

  10. Tom says:

    The pure CSS version that you point to has an error that will not allow a person to copy and paste if he/she wanted to use the page to learn step by step. It’s an extra
    tag in the header.

  11. Charis says:

    Hi there Charis April 8 2010

    First I would like to say good job great stuff

    I thought there was lots of types of tabbed nav that hid the page info, (usually only text type info) but after searching for a long time this tutorial was all I could find all the other tutorials I read simply linked each tab to a new page , defeating the purpose of true, tabbed navigation ( given that the tabs look like folders that are stacked )

    I have completed your first tutorial, Pure CSS Hide and Display Content no problem but I am having trouble getting the update to work I do not know where to paste the extra code you put into the “JavaScript / Pure CSS Hide and Display Content”

    I would also like to know how to use images for the tabs , just the easiest way, as well as the so called ‘sliding doors’ method

    with the ability to add images for the tabs and being able to choose one tab to load/be open automatically would deffinitly make your tutorial the best on the web by faaaaar

    An updated tutorial to include this would be great

    Keep up the good work

    ( dates on your comments would be great too, to let people know if these posts are still active /relevant )

  12. Norbert says:

    Thank you

    Will use it for a sidebar, vertical kind of navigation.
    The formula with the visitors at the end should be a no worry as long as we know our audience. Yes it is kind of discrimitation, but whoever really wants to view that content will get A browser :)

    yup and keep these coming :)

  13. as says:

    Hello anyone can teach me?

  14. Matt says:

    How do you keep div 1 open before any titles are clicked on. Like it’s the default Thanks-Matt

  15. Andrés says:

    Hi, Could you tell me how can I get Home Button and Home content always visible, I mean when somebody enter the site home content appears without any mouse over… when user select \”about\” content change as usual� thanxs

  16. Denis says:

    Thanks a lot! :) Just what i wanted. Great job!

  17. Devin R. Olsen says:

    I always enjoy feedback from my readers!

Leave a Reply