Open In App

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

Improve
Improve
Like Article
Like
Save
Share
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:




<!DOCTYPE html>
<html>
  
<head>
    <title>How to create slide left and
      right toggle effect using jQuery?</title>
  </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:




<!DOCTYPE html>
<html>
  
<head>
    <title>How to create slide left and
      right toggle effect using jQuery?</title>
  </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”:



Last Updated : 17 Sep, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads