slideToggle JQuery right to left

Question

i\'m new in JQ i have this script i found on the internet and its do exactly what i need but i want the sliding will be from the right to the left how can i do it? please help

Answer 1

I would suggest you use the below css

.showhideoverlay { 
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  position: fixed;
  background: #000;
  opacity: 0.75;
}

You can then use a simple toggle function:

$('a.open').click(function() {
  $('div.showhideoverlay').toggle("slow");
});

This will display the overlay menu from right to left. Alternatively, you can use the positioning for changing the effect from top or bottom, i.e. use bottom: 0; instead of top: 0; - you will see menu sliding from right-bottom corner.

Answer 2

include Jquery and Jquery UI plugins and try this

 $("#LeftSidePane").toggle('slide','left',400);

Answer 3

I know it's been a year since this was asked, but just for people that are going to visit this page I am posting my solution.

By using what @Aldi Unanto suggested here is a more complete answer:

  jQuery('.show_hide').click(function(e) {
    e.preventDefault();
    if (jQuery('.slidingDiv').is(":visible") ) {
      jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
    } else {
      jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
    }
  });

First I prevent the link from doing anything on click. Then I add a check if the element is visible or not. When visible I hide it. When hidden I show it. You can change direction to left or right and duration from 200 ms to anything you like.

Edit: I have also added

.stop(true,true)

in order to clearQueue and jumpToEnd. Read about jQuery stop here

Answer 4

You can do this using additional effects as a part of jQuery-ui

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("slide");
});

Test Link

Answer 5

Please try this code

$(this).animate({'width': 'toggle'});

Answer 6

Try this

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);