jQuery: slideToggle effect

This entry is part 23 of 33 in the series jQuery Tutorial

The slideToggle displays or hides the matched elements with a sliding motion.

Its code isĀ .slideToggle(duration).

<!doctype html>
    <title>slideToggle demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        p {
            width: 400px;

    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!

    $( 'button' ).click(function() {
        $( 'p' ).slideToggle('slow');


Try The Code

Series Navigation<< jQuery: Show effect
jQuery: Traversing >>