Have a new project in the pipeline?

Proposal Form

Hiding DIVS with CSS

28th August, 2010

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.

Web Design Posts

Recent Posts