Run

Tutorial With Example

Run your live code

 
33
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<title>Example of jQuery Slide-Up and Slide-Down Effects</title>
6
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
7
<style>
8
    p{
9
        padding: 15px;
10
        background: #B0C4DE;
11
    }
12
</style>
13
<script>
14
$(document).ready(function(){
15
    // Slide up displayed paragraphs
16
    $(".up-btn").click(function(){
17
        $("p").slideUp();
18
    });
19
    
20
    // Slide down hidden paragraphs
21
    $(".down-btn").click(function(){
22
        $("p").slideDown();