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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before Click on Button:

After Click on Button – “Click To Slide-Left”:

After Click on Button – “Click To Slide-Right”:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:
Before Click on Button:

After Click on Button – “Click To Slide-Left”:

After Click on Button – “Click To Slide-Right”:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.