jQuery: Show effect

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

The show effect will display the matched elements.

Its code is .show(duration).

<!doctype html>
    <title>show demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        p {
            background: yellow;

<button>Show it</button>
<p style='display: none'>Hello 2</p>

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


Try The Code

To make this demo, we first need to hide the text inside the <p> elements.

This can be done by style=’display: none’.

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