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

Small things always make you to think big

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.