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

Last Updated : 17 Sep, 2019

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

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

How to create a Label hidden flip toggle switch using jQuery Mobile ?

SHUBHAMSINGH10

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?