HOW TO CREATE A JQUERY DROPDOWN DIV

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">
</div>

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>
 </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>
</div>

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;
 background-color:#121314;
 border-radius:3px;
 color:white;
 font-family:arial;
 text-decoration:none;
}
 
a:hover{
 padding:4px 9px;
 background-color:#4B4F53;
 border-radius:3px;
 color:white;
 font-family:arial;
 text-decoration:none;
}

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:

.dropdowndiv{
 width:90%;
 float:left;
 text-align:center;
 border-bottom: 1px solid #B1B1B1;
 padding:20px 5%;
 background-color:#FEFEFE;
 margin:0px !important;
 display:none;
}

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>
<script>
 
 $(document).ready(function(){
 
 $("#showdiv").click(function(){
 
 $(".dropdowndiv").slideDown(500);
 
 });
 
 $("#hidediv").click(function(){
 
 $(".dropdowndiv").slideUp(500);
 
 });
 
 });
 
</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.