jquery .slideToggle() horizontal alternative?

Question

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

Answer 1

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

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

Answer 2

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>

Answer 3

If you wish to toggle between two width's you could do something like below :

$('#A').click(function(){
if($(this).width() > 20){
$(this).animate({width: '20px'})
}
else{
$(this).animate({width: '50%'})
}
});

#A{
  float:left;
  width:50%;
  height:300px;
  background:red;
}
#B{
  min-height:300px;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
</div>
<div id="B">
<span>Some stuff</span>
</div>

Answer 4

If you needed it to be continuous, you can set up setTimeinterval as follows

<?php
setInterval(function (){
$('div').animate({width: 'toggle'});
},200);
?>

Answer 5

I wanted the Height to toggle so I used(I used in my project)

function show_hide(target){
 var x = document.querySelectorAll("." +target);
 var y = $( x ).next()
 $(y).animate({height: 'toggle'});
}

Answer 6

You can use the animate method:

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

http://jsfiddle.net/7ZBQa/