jQuery: Toggle effect

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

The toggle effect displays or hides the matched elements.

Its code is .toggle(duration).

<!doctype html>
<html>
<head>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            background: #dad;
            font-weight: bold;
        }
    </style>
</head>
<body>

<button>Click Me</button>
<p>Hiya</p>

<p>Such interesting text, eh?</p>

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

</body>
</html>

Try The Code

Series Navigation<< jQuery: Hide effect
jQuery: Toggle an image >>