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:
$(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:
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
Tidy Web Content
</div>
And create a text link that will open it, making content visible to the reader.
Now the fun / creative bit, lets add some tidy CSS to the panel and btn-slide.
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.
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!
Hi Chris, many thanks for your comments. We hope this post will be a helpful resource for other web folk.
I think it will be, jQuery really has resurrected javascript – in a good way :)