How to create jQuery slide up and down toggle effect

  436 views   10 months ago jQuery

Use the jQuery slideUp() and slideDown() methods

You can simply use the jQuery slideUp() and slideDown() methods to hide and show the HTML elements with a smooth sliding motion using a single line of code.

Let's try out the following example to understand how these methods basically work:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideUp and slideDown Effect</title>
<style>
    .box{
        width: 400px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
    .box-inner{
        padding: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $(".slide-up").click(function(){
            $(".box").slideUp();
        });
        $(".slide-down").click(function(){
            $(".box").slideDown();
        });
    });
</script>
</head>
<body>
    <button type="button" class="slide-up">Slide Up</button>
    <button type="button" class="slide-down">Slide Down</button>
    <hr>
    <div class="box">
        <div class="box-inner">Lorem ipsum dolor sit amet...</div>
    </div>
</body>
</html>

Alternatively, you can use the jQuery slideToggle() method that perform both slide up and down animation in such a way that if the element is initially displayed, it will be hidden; and if it is hidden, it will be shown. Let's check out the following example to see how it works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideToggle Effect</title>
<style>
    .box{
        width: 400px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
    .box-inner{
        padding: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").slideToggle();
        });
    });
</script>
</head>
<body>
    <button type="button" class="slide-toggle">Slide Toggle</button>
    <hr>
    <div class="box">
        <div class="box-inner">Lorem ipsum dolor sit amet...</div>
    </div>
</body>
</html>

 

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles