Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery .slideToggle() horizontal alternative?

You can use the animate method:

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

http://jsfiddle.net/7ZBQa/


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

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

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>