Open In App

How to create slide left and right toggle effect using jQuery?

Last Updated : 17 Sep, 2019
Comments
Improve
Suggest changes
Like Article
Like
Report
The task here is to create a slide left and right toggle effect in the JQuery, you can use the jQuery animate() method. .animate() method: It is used to change the CSS property to create the animated effect for the selected element. Syntax:
(selector).animate({styles}, para1, para2, para3);
Approach:
  • Actual Box width is stored in the variable whose width value is to be changed.
  • .animate() method takes the selector which is to be animate.
  • Width style property is given the values as per the requirement.
  • width: 0 - For toggle left.
  • width: previous value stored - For toggle right.
Example 1: html
<!DOCTYPE html>
<html>

<head>
    <title>How to create slide left and
      right toggle effect using jQuery?</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js">
  </script>
    <style type="text/css">
        .box {
            float: center;
            overflow: hidden;
            background: #32a852;
            width: 400px;
            padding: 0px;
        }
        /* Add padding and border to inner content
    for better animation effect */
        
        .box-inner {
            width: 400px;
            padding: 0px;
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
        <h3>jQuery | How to create slide 
          left and right toggle effect?</h3>
        <hr>
        <div class="box">
            <div class="box-inner">
                <h4>.animate() method is used</h4>
                <p>GEEKSFORGEEKS - A computer
                  science portal for geeks.</p>
            </div>
        </div>
        <hr>
        <button type="button" class="slide-left">
          Click to Slide-Left
      </button>
        <button type="button" class="slide-right">
          Click to Slide-Right
      </button>
        <script type="text/javascript">
            $(document).ready(function() {
                var boxWidth = $(".box").width();
                $(".slide-left").click(function() {
                    $(".box").animate({
                        width: 0
                    });
                });
                $(".slide-right").click(function() {
                    $(".box").animate({
                        width: boxWidth
                    });
                });
            });
        </script>
    </center>
</body>

</html>
Output: Before Click on Button: After Click on Button - "Click To Slide-Left": After Click on Button - "Click To Slide-Right": Example 2: html
<!DOCTYPE html>
<html>

<head>
    <title>How to create slide left and
      right toggle effect using jQuery?</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js">
  </script>
    <style type="text/css">
        .box {
            float: center;
            overflow: hidden;
            background: #32a852;
            width: 400px;
            padding: 0px;
        }
        /* Add padding and border to inner content
    for better animation effect */
        
        .box-inner {
            width: 400px;
            padding: 0px;
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
        <h3>jQuery | How to create slide 
          left and right toggle effect?</h3>
        <hr>
        <div class="box">
            <div class="box-inner">
                <h4>.animate() method is used</h4>
                <p>GEEKSFORGEEKS - A computer 
                  science portal for geeks.</p>
            </div>
        </div>
        <hr>
        <input onclick="change()" 
               type="button" 
               class="slide-toggle"
               value="Click to Slide-Left" 
               id="myButton1">
  
        <script type="text/javascript">
            $(document).ready(function() {
                $(".slide-toggle").click(function() {
                    if (this.value == "Click to Slide-Left") this.value = 
                      "Click to Slide-Right";
                    else this.value = "Click to Slide-Left";
                    $(".box").animate({
                        width: "toggle"
                    });
                });
            });
        </script>
    </center>
</body>

</html>
Output: Before Click on Button: After Click on Button - "Click To Slide-Left": After Click on Button - "Click To Slide-Right":

Next Article

Similar Reads