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

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”:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?