jquery .slideToggle() horizontal alternative?

slideToggle does exactly what I want, only I want the slide to be horizontal.

I now have an horizontalhide/show and animation on click, but I would like to have the toggle options. So that when I click on the active link, it will play the animation reversed and hide itself.

What would be the best way to do this?

Solution 1:

You can use the animate method:

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

http://jsfiddle.net/7ZBQa/

Solution 2:

Created a fiddle http://jsfiddle.net/powtac/RqWk2/

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

Solution 3:

There is another way, to use jquery ui. See api jquery ui but it may not be always useful as it has its glitches

Here jsfiddle to see the glitch, it does not move all the rest elements smoothly. I put here code, but it should be used with jQuery UI 1.10.3.

js

$( document ).click(function() {
  $( "#toggle" ).toggle('slide');
});

css

.t {
    width: 100px;
    height: 100px;
    background: #ccc;
    display: inline-block;
    float: left;
  }

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>Click anywhere to toggle the box.</p>
<div id="toggle" class='t'>1</div>
<div id="" class='t'>2</div>
<div class='t'>3</div>