How to show/hide a div with an animation from right to left with JS?

Question

I'm trying to show/hide a div with an animation from right to left.

Here is the JScript

$(function() { $('.link').click(function(e) { $('#text').slideToggle(); });});

Here is the full demo : http://jsfiddle.net/q10f3zvL/2/

My problem is that the animation is going from top to bottom. I'm looking for a way to get it going from right to left and ideally, I would like a solution with Javascript.

http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative has a similar question — Dave Goten, Jan 26 '15 at 20:07

score 2 · Accepted Answer · answered Jan 26 '15 at 20:11

2

You don't want $('#text').slideToggle(); That's for moving up and down as you've discovered. For left to right, you'll want $('#text').animate();, and just style it yourself.

jQueryUI already has this built in with their slide effect.

answered Jan 26 '15 at 20:11

charles

547
1
3
11

While jQueryUI might come and handy, it's a mayor overkill for just 1 animation. Before you use it, check out the possibilities to see if you can find more uses for it to make it worth the load/parse :) If not, just stick to the basic animate and do it yourself :) – Martijn Jan 26 '15 at 20:24
@Martijn: I get that jQueryUI would be overkill for this. I just wanted to point out that the functionality existed, just not in the plugin he was using. `$.animate()` is the typical choice for this kind of thing. – charles Jan 27 '15 at 12:40

Martijn · Answer 2 · 2015-01-26T20:23:06.497

You take two divs, and give the inner div a width (this is needed, or the text will adapt to the width and become a long 1 word lined paragraph), and give the outer div an overflow: hidden;

You can then choose for js animation via jQuery's .animate(), but I prefer using css. This has, to my experience, a better performance result, specially on mobile devices.

 $('button').on('click', function(e){
     $('#Outer').toggleClass('Closed');
  });

#Outer{
  max-width: 500px;
  overflow: hidden;
  transition: max-width 1s;
  background: #DDE; /* Just for demo */
}
#Outer.Closed{ max-width: 0px; }

#Inner{ width: 500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Toggle width</button>

<div id="Outer">
  <div id="Inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis quam at ultricies rhoncus. Fusce eget dignissim lacus. Vestibulum venenatis a purus eu sodales. Quisque sodales lectus ut laoreet tempor. Nunc id neque dictum tellus consectetur interdum. Suspendisse eget turpis tincidunt, sollicitudin nisi in, scelerisque metus. Nunc eleifend purus a sapien sodales ullamcorper. Nunc pretium lacus at nibh ornare imperdiet. Phasellus non porttitor est, ut pharetra erat. Aenean rhoncus rutrum eros, eget iaculis ex sodales eget. Nulla id aliquet velit. Duis scelerisque arcu urna. 
    </div>
  </div>

How to show/hide a div with an animation from right to left with JS?

2 Answers2