HOW TO CREATE A JQUERY SLIDEDOWN TOGGLE JQUERY EFFECT TUTORIAL

Intro

Within this tutorial we are going to create a toggle effect slide down div which will open a close on the same button.

Step 1: The Css

First we will write some css to style it a little. This part is not important within this tutorial as you can style it how you want but we just want to show you how we styled this tutorial!

html,body{
 width:100%;
 padding:0;
 margin:0;
}
 
.dropdownwrap{
 height:auto;
 float:left;
 margin:0px 0px 20px 0px;
 background-color:#434343;
 display:none;
 padding:20px;
}
 
.container{
 width:100%;
 float:left;
}
 
.container h2{
 width:100%;
 float:left;
 padding:40px 0px;
 margin:0;
 text-align:center;
 font-family: 'Patrick Hand SC', cursive;
 font-size:36px;
 color:#434343;
}
 
.dropdownwrap h3{
 width:100%;
 float:left;
 padding:40px 0px;
 margin:0;
 text-align:center;
 font-family: 'Patrick Hand SC', cursive;
 font-size:36px;
 color:white;
}
 
.container p{
 font-family: 'Open Sans', sans-serif;
 font-size:10pt;
 color:#B7B7B7;
 text-align:center;
 padding-bottom:50px;
}
 
.dropdownwrap p{
 font-family: 'Open Sans', sans-serif;
 font-size:10pt;
 color:white;
 text-align:center;
 padding-bottom:50px;
}
 
.container a,
.container a:visited{
 padding:8px 14px;
 font-size:12pt;
 border:1px solid #CCCCCC;
 background-color:#DDDDDD;
 text-decoration:none;
 text-transform:uppercase;
 color:#424242;
 border-radius:3px;
}
 
.container a:hover{
 padding:8px 14px;
 font-size:12pt;
 border:1px solid #F2F2F2;
 background-color:white;
 color:#CCCCCC;
}

Lets run you throught the main css which helps with the magic.

The html,body css is not needed, this is just styling the body of the html document.

The dropdownwrap can be styled to how it fits your site, the only inportant bit is the display:none;

This tells the browser not to show it, we will show this using jQuery a little later within the tutorial.

To be honest that is the only bit of the css you really need to know, the other bits are just styling the page.

Step 2: The Html

Now we have created the css all we have is the html and jQuery section, in this section we will be looking at the html.

First we need the dropdown div.

<div class="dropdownwrap"></div>

You can put all your information you want to show within the drop down within this div!

Now where ever you want the button to toggle this div, we have done it using a simple link but you can do it with a text, div, button or image but for this tutorial we have done it with a link.

<p><a id="dropdown" href="#" title="Click This Button">X</a></p>

The only important information you need to know is to set an id, we have created an id and called it dropdown, this is not relevant but I like to just call things for what they are!

Step 3: The jQuery

This is the last part of the tutorial.

You can either put the jQuery within your own or use the body, within this tutorial we have put it within the html.

If you have not already you will need to put the jquery link in, either from Google or straight from jQuery itself, I prefer using google.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Now for the custom jQuery!

<script>
$(document).ready(function(e){
 
 $('#dropdown').on('click',function(){
 
 $('.dropdownwrap').slideToggle();
 
 });
 
})
</script>

We first call the #dropdown when the #dropdown is clicked.

Basically its pinging the website every so many 100's of milliseconds and as soon as the link of #dropdown is clicked it then starts a function.

In our function it uses the jQuery's standard function of slideToggle.

We assign this function to the .dropdownwrap which means whenever the link is clicked it will dropdown and up the dropdownwrap div.

That concludes the tutorial, if this helped please share using the social buttons below!

CHECKOUT THE DEMO HERE