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>
<head>
    <title>slideToggle demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            width: 400px;
        }
    </style>
</head>
<body>

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

<script>
    $( 'button' ).click(function() {
        $( 'p' ).slideToggle('slow');
    });
</script>

</body>
</html>

Try The Code

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