Slide toggle from right to left and left to right using jQuery UI

In this post I am going to explain, how we can slide a div element from right to left and left to right using jQuery UI toggle() method. Firstly, I will explain how we can do it using a simple example and finally, in the last demo section I will post two additional fiddle demos on the slide effect. 🙂

The HTML markup we will be using is quite simple, like this:

<p>
    <button id="myButton">Click Me!</button>
</p>
<div id="myDiv">
    <p>Some dummy text here....</p>
</div>

Now our requirement is that, when we click on the button with ID  myButton , we want to slide our div element here with ID  myDiv , from right to left and again on clicking the button from left to right and so on. Mainly, we want to toggle the div from right to left on button click.

Now, we can achieve this using jQuery UI like this:

$( "#myButton" ).click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'right' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;

    $('#myDiv').toggle(effect, options, duration);
});

Explanation:

  1. Code in the first line
    $("#myButton").click(function () {
    

    Here, we are binding a click event handler to  myButton . Now if we click on this element, then the code below will be executed.

  2. Code in the fourth line
    var effect = 'slide';
    

    This code is used to set a variable named  effect . This variable is a string indicating which effect to use for the transition. Here, we are using the Slide Effect and that is why we are setting the  effect as ‘slide’ here.

  3. Code in the seventh line
    var options = { direction: 'right' };
    

    Here, we are setting a variable named  options . This variable is mainly an object used for effect-specific settings and easing. In this option we are setting the direction of the effect and its possible values are: “left”, “right”, “up”, “down”. For our demo, we are setting the  direction key value as ‘right’, quite obvious. 😛

  4. Code in the 10th line
    var duration = 700;
    

    Here, we are setting a variable named  duration . This variable is a string or number determining how long the animation will run. In our case, we are setting it as 700, since we want our slide animation to run for 700 milliseconds.

  5. Code in the 12th line
    $('#myDiv').toggle(effect, options, duration);
    

    And finally, we are setting all the variables to the .toggle() method. By setting all these variables, we have made sure that we will be able to see a slide toggle effect from left-to-right and vice-versa. Please click on the below demos to see the effects in action.

Demo:

That’s it. If you have any comments or suggestion or any queries about this post please add it in comments section. I would really appreciate it.

Happy Coding 🙂

Advertisements

34 thoughts on “Slide toggle from right to left and left to right using jQuery UI

  1. This is a fantastic site submit, I am happy I came across it. Ill return to their office down the course to check out additional posts.

  2. Hi, thank you for putting this up, very useful indeed.

    What if I wanted to offset the “myDiv” so only a portion of the div was visible on screen?

    When clicking on the button the “myDiv” would push the “body” to the right, appearing next to it.

    The result I’m trying to achieve can been seen on this website:

    http://victoryjournal.com

    Hope I’ve explained this correctly.

    Thanks Philippe

    • Hi Philippé, first of all thanks a lot for your valuable feedback. I really appreciate it. Next, regarding the issue you’re facing, I am not able to get a clear picture of what’s your requirement here. Could you please post the issue on the Stack Overflow site with a clear description of your requirements. Please also include your attempted solutions, why they didn’t work, and the expected results. That would really help!

  3. Pingback: Slideout Navigation Bar | teksnippets

  4. Hi..
    its looking good..
    if u have two dives, we need to show only one div,
    when click on the first div it shold slide to left and at the same secound div comes from right to left.
    how can i achive this?

    • Hi Chiranjeevi, thanks so much for your response.
      Regarding your issue, could you please include some attempted solutions, why they didn’t work, and the expected results.
      That would really help in resolving your issue. Thanks!

  5. Hi Palash

    In the second part of your explanation, “slide” is used, please tell me what other effects we can use in this section. “fade” is worked?
    I am new to jquery
    Thanks

  6. Hello Palash,

    What library version of jQuery and jQuery UI are you using for these examples? The issue im having is that when I click the button the content doesn’t slide it just appears. I did get it working previously but I broke it somehow while moving the scripts around.

    Thanks, Andrew.

  7. Hi,
    i am trying to implement the above j query but i am getting error -Microsoft JScript runtime error: Object doesn’t support this property or method on line this.pos = jQuery.easing[specialEasing || defaultEasing](this.state, n, 0, 1, this.options.duration);

    • Hi Avinash,

      Thanks so much for your response. Regarding your question, have you included the jQuery UI js file also in your code along with the jQuery js file? Please check that once and let me know if you need any further help!

      Thanks,
      Palash

      • Hi,
        i have included this javascript in my page ()
        and i am getting this error “Microsoft JScript runtime error: Object doesn’t support property or method ‘[object Object]'” , plz help me

  8. Hi,
    i have included this javascript in my page “”.

    and i am getting this error “Microsoft JScript runtime error: Object doesn’t support property or method ‘[object Object]‘” , plz help me

  9. Hi Palash, First of all thank you for that such a nice article.But I’m having problem using this code. I had gone through the code line by line but unfortunately its not working at all

    • Hi Mohit,

      Thanks so much for your response. Could you please post a functional example that illustrates your problem on jsFiddle. I could then provide you with some solution to your issue.

      Thanks,
      Palash

  10. Hello Palash, this is something I’ve spent hours searching for; thank you. However, I added multiple divs & buttons and I got somewhere, until I got stuck at sliding the previous div back into place when switching buttons (if that makes any sense). It’s demonstrated here: http://jsfiddle.net/hcmLw/1786/

    How will I go about fixing this?

    Thank you,
    De’Zsa

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s