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>
    <title>hide demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        p {
            background: #dad;
            font-weight: bold;

<button>Click Me</button>

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

    $('button').click(function () {


Try The Code

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