Creating Sliding Divs With jQuery

jQuery is used in pretty much every web design nowadays, mainly because of how easy it is to use. Today I am going to show you how to create sliding divs using some very basic jQuery.

The main reason I use sliding divs is when a web page has a lot of content. Too much content can make a web page look untidy and requires the user to endlessly scroll down to find the desired text. A solution to this is to place certain parts of content in hidden divs, with a link to trigger the text to appear. This can be done with a simple jQuery effect called SlideToggle.

Linking the jQuery Library

First off we need to link to the jQuery library. You do this by placing the following in the head section of your code.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Be sure to check for the latest and most up to date library on Google. Alternatively, you can download and link to a local copy of the jQuery library.

The HTML

The next stage is to create the HTML markup. I have created two links with a class of ‘drop-dwn’ (very important). There are also two div classes called ‘drop-info’. These are going to be the hidden/sliding divs.

<a class="drop-dwn" href="#">Click Me</a>
<div class="drop-info">
    <p>The Content....</p>
</div><br />
<a class="drop-dwn" href="#">Click Me Too</a>
<div class="drop-info">
    <p>Some more content....</p>
</div>

The CSS

I have used CSS to apply some basic styling but more importantly, hide the sliding divs by setting the display to none on ‘.drop-info’.

.drop-info {
        display:none;
        border:#999 1px solid;
        padding:5px;
        width:500px;
}
.drop-dwn  {
        background:#CCC;
        border:#999 1px solid;
        width: 500px;
        padding:5px;
        color: #FFF;
        display:block;
}

The slideToggle

Now for the fun part – copy and paste the following jQuery into the head section of your web page code. Basically what this code says is – when an element with a class of ‘drop-dwn’ is clicked, slide down the next element over 3 seconds. Because the next element is the hidden div – this will work nicely.

<script type="text/javascript">
$(function(){
        $('.drop-dwn').click(function(){
                $(this).next().slideToggle(300);
                return false;
        });
});
</script>

If you want to add a div, or any other element, between the trigger link and hidden div, you will need to specify the target div by replacing .next() with .next(‘.drop-info’); this may vary depending on your markup.

I hope you found this post useful and I will be writing some more jQuery posts very soon.