Hiding DIVS with CSS

This tutorial will show you how to create a DIV, add some tidy CSS and Java Script to create a hidden area on your webpage! Here you could add some promotional offers or extra content for your readers. (To see this code in action please click on the two blue raindrops on our Tidy Design homepage, enjoy!)

So step one is the Java Script, this can be pasted into the header section of your webpage:

<script type=”text/javascript”>
$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#panel”).slideToggle(“slow”);
$(this).toggleClass(“active”); return false;
});  
});
</script>

You will also need to link to a jQuery file such as:

<script type=”text/javascript” src=”http://www.tidydesign.com/jquery.js”></script>

Now you have the above in place please locate an area on your webpage that you would like to add this tidy effect. You will then need to create the hidden DIV

<div id=”panel”>
Tidy Web Content
</div>

And create a text link that will open it, making content visible to the reader.

<a href=”#”>Click here to view Tidy Web Content</a>

Now the fun / creative bit, lets add some tidy CSS to the panel and btn-slide.

#panel {
background: #333;
height: 250px;
display: none;
text-align: center;
color:#FFF;
}
.btn-slide {
background-color: ebebeb;
text-align: center;
width: 200px;
padding: 10px;
margin: 0 auto;
display: block;
text-decoration:none;
color: #666;
border: 2px solid #B5B5B5;
}

Now you have all the components in place your webpage with ‘hidden DIV’ should something like the following… Please click here to download a sample page.

3 thoughts on “Hiding DIVS with CSS

  1. Chris Wharton

    Great post, in fact you can make this even more accessible for users without JavaScript enabled or those using a screen reader. As many screen readers do not display content when the CSS states display: none. All you need to do is remove display: none from the stylesheet. Then add one new line of jquery within the document.ready function before your btn-slide click event.

    $(“#panel”).hide();

    That way if JavaScript is disabled the panel will still show. Then you have the best of both worlds!

Leave a Reply