Learn How To Create A Dropdown Div Using jQuery, CSS And Html

UBL Designs Blog


Welcome to our latest online tutorial, in this tutorial we look at jQuery, Css and Html to show you how easy it is to create a dropdown div using Html, Css, jQuery and only a little bit of coding!

 Take a look at the demo

Html Side Part Of The Tutorial

First all you need to do is insert a div just after the body tag.

Lets class the div with dropdowndiv so we know what the div is for, see example below:

<div class="dropdowndiv">

Now lets put some text in it and a link to close the div as we dont want it visible all the time after we have pressed the button.

You should have something like this:

<div class="dropdowndiv">
 </p><pre class="brush: php;">This is some text to show it works <a href="#" id="hidediv" title="Hide Div">X</a></pre><p></p>

As you can see on the link i set an id which is hidediv, This is because we will be calling within the jQuery!

Now we need a button to dropdown the div. I have created a link and then put an id of showdiv which we will use in the jQuery!

<a href="#" id="showdiv" title="drop the div down">Click Here</a>

CSS side Part Of The Tutorial

For the buttons i used the following coding within the css:

a, a:visited{
 padding:4px 9px;
 padding:4px 9px;

You obviously do not need to use this css, you can use your own, this is just styling!

For the dropdown div the css used is as follows:

 border-bottom: 1px solid #B1B1B1;
 padding:20px 5%;
 margin:0px !important;

Ok lets walk you through this...

The width, float etc does not really matter as this is just styling and again this is something you can change to suit your site. The magic is the display:none;

This makes it so the div is not shown within the browser.

jQuery Part Of The Tutorial

Lets show the jQuery, then i will talk you through it.

<script src="http://code.jquery.com/jquery-latest.js"></script>

OK first we added the jQuery hook which gets the framework so that jQuery can be used within the browser.

Then we started with the doller sign which states the jQuery rule, the (document) is stating the htmlpage you are on and the .ready is stating that only perform this query once the whole html, css has been read by the brwoser, then start.

Then we enter a function. We the do the doller sign and brackets again, we ask for the #showdiv, with the live click function which states if the link with the id of showdiv is clicked, perform this query.

Then we ask for the dropdowndiv to slide down for 500 milliseconds because jQuery is not in milliseconds and not seconds.

We then do the same function for the hidediv id and instead of dropping the dropdown div down, we push it up with the slideUp function.

That is it, Hope you liked it. If you did please share and post within twitter and facebook. If you have any questions please ask away using the comment section at the bottom.



Frank Indelicato 11 May, 2012

Thank you. This Tutorial was very helpful. After searching all over I finally came across your example and it was the best I have found. Thanks again!


Admin 11 May, 2012

Thank you for the kind comments, we are glad this jquery tutorial was to your liking!


Rylan Gotto 13 May, 2012

Thank you this is a great tutorial exactly what i needed today


Conor 11 Jun, 2012

Hello, thanks for this great tutorial. I was just wondering if there was a way to make the button that closes the div to be the same as the one that opens it. For example on the old Google homepage if you click on 'More' it will open that div and then clicking more again will close it. If you could please email me back at my email.

Thanks again.


Admin 13 Jun, 2012

Hi Conor, Yes this can be done, we will do a tutorial like this in the very near future so please stay tuned!


W.J.Kok 30 Dec, 2012


Due to this website (and some trial and error!), I think I do understand this matter.


Alex 7 Apr, 2013

Thank you so much for your tutorial. I have a question, and I hope you can help me. I see you've added < a href="#" id="hidediv" title="Hide Div">X< /a > to close the container. How can I make so the < /div > does both, open and close? I'm creating a e-mail alert subscription container, and have made a custom icon button where the user will click on the button and the container will slide down with the input box for email to be entered. But instead of a close button inside that container, I would prefer that the user would click the mail alert icon again, and the container will slide back up. I will include arrow down sprite icon when the div container is hidden, and arrow up sprite icon when the container is shown. Thanks in advance for your help, and sorry for my terrible English.


Admin 7 Apr, 2013

We are about to release a tutorial which shows how to do this, It will be released within the next 2-3 days. Thanks


sa 24 Jun, 2013



castiel 23 Jul, 2013

this tutorial is great !!!!!!!!!!!!!!!!!!!!!!1


Admin 23 Jul, 2013

Thank you :)

Comments are now closed for this post... – UBL Designs