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

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

jQuery: Hide effect

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

The jQuery hide effect will hide the matched elements.

Its code is .hide(duration), where duration is in ms.

The default for duration is 400ms.

<!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').hide('slow');
    });
</script>

</body>
</html>

Try The Code