Hiding DIVS with CSS

28^th 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:

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

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.

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.