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>
<html>
<head>
    <title>show demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>
<body>

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

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

</body>
</html>

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 >>