How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left?

Most everything I see out there is always left to right.


$("#slide").animate({width:'toggle'},350);

Reference: https://api.jquery.com/animate/


This can be achieved natively using the jQueryUI hide/show methods. Eg.

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

Reference: http://docs.jquery.com/UI/Effects/Slide


Use this:

$('#pollSlider-button').animate({"margin-right": '+=200'});

Live demo

Improved version

Some code has been added to the demo, to prevent double margin on double click: http://jsfiddle.net/XNnHC/942/

Use it with easing ;)

http://jsfiddle.net/XNnHC/1591/

  • Extra JavaScript codes removed.

  • Class names & some CSS codes changed

  • Added feature to find if is expanded or collapsed

  • Changed whether use easing effect or not

  • Changed animation speed

http://jsfiddle.net/XNnHC/1808/