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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With