Slide Up and Down with jQuery slideToggle(), slideUp() and slideDown() Methods

A few days back I was working on a website and I came across a situation where I had to slide an element up and down animatedly. It was a container with few elements in it (a form), that would remain hidden until someone clicks a button to slide it down. Once done with the form entries, they would click a button to slide the container up and hide it. I thought this would be useful for a newbie too. Therefore, in this article I’ll show you how to create a sliding effect using jQuery.

jQuery provides three simple slide methods to create a smooth sliding effect. These methods also take an optional speed parameter, which makes it more interesting.

1) slideDown() - Slides an element down.

2) slideUp() – Slides an element up.

3) slideToggle() – Toggles between slideDown() and slideUp(). It means when the element is in hidden state, the toggle will display the element by sliding it down. The method works reverse, that is, it will slide up and hide the element.

The above methods work in accord with the CSS display property. We have to set the display property of the element to none, that is, hide it in the beginning.

Let’s see these methods in action.

jQuery slideDown() Method

Syntax

$(selector).slideDown(speed);

The speed parameter as I said, is optional, that is you may use it or omit it. The value for the parameter is usually fast or slow and occasionally you may pass a numeric value for milliseconds.

The Markup and the Script

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <p><input type="button" id="slide" value="Click to Slide Down" /></p>

    <div id="container" 
        style="display:none;
        width:350px;
        border:solid 1px #CCC;
        padding:10px;">

        <div>
            <div>
                <label>Name: </label>
                <div><input id="tbname" name="yourname" /></div>
            </div>
            <div>
                <label>Email Address:</label>
                <div><input id="tbEmail" name="email" /></div></div>
            <div>
                <label>Additional Information (optional):</label>
                <div><textarea rows="5" cols="46" id="info"></textarea></div>
            </div>
        </div>
    </div>
</body>

<script>
    $(document).ready(function () {
        $('#slide').click(function () {
            $('#container').slideDown('slow', function () {
                $('#tbname').focus();
            });
        });
    });
</script>
</html>

Try it

It’s a simple form with few elements in it. Look carefully, I have set the container’s (a <div>) display property to none. That is, when the page loads the container with all its elements remains hidden. Just over the container, I have a button and its click event will execute the slideDown() method.

jQuery slideUp() Method

Syntax

$(selector).slideUp(speed);

The jQuery slideUp() works the other way, that is, it would slide the element up and hide it. However, if I have to use the above example, then I have to make a small change. I’ll set the container’s display property to block. This will display the containers elements when the page loads.

The Code

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>
    <p><input type="button" id="slide" value="Click to Slide Up" /></p>

    <div id="container" 
        style="display:block;
        width:350px;
        border:solid 1px #CCC;
        padding:10px;">
       
       <div>
            <div>
                <label>Name: </label>
                <div><input id="Text1" name="yourname" /></div>
            </div>
            <div>
                <label>Email Address:</label>
                <div><input name="email" /></div></div>
            <div>
                <label>Additional Information (optional):</label>
                <div><textarea rows="5" cols="46" id="Textarea2"></textarea></div>
            </div>
        </div>
    </div>
</body>

<script>
    $(document).ready(function () {
        $('#slide').click(function () {
            $('#container').slideUp('slow', function () {
                $(this).focus();
            });
        });
    });
</script>
</html>

Try it

jQuery slideToggle() Method

Syntax

$(selector).slideToggle(speed);

The jQuery slideToggle() method combines both the methods that I have described above. I do not need separate methods to either slide up or slide down. Its two in one and this is the most commonly used sliding method in jQuery. As usual, the speed parameter takes values as fast, slow or a numeric value for milliseconds.

Again, I am using the above example. Therefore, in the markup I’ll set the display property of the container back to none.

The Markup

<div id="container" 
    style="display:none;
    width:350px;
    border:solid 1px #CCC;
    padding:10px;">
    …
</div>

The Script

<script>
    $(document).ready(function () {
        $('#slide').click(function () {
            $('#container').slideToggle('slow', function () {
                $('#tbname').focus();
            });
        });
    });
</script>

That’s it. Hope this article and its example will help you understand the sliding concepts using jQuery slide methods and you will implement it in your application.

← PreviousNext →