I want to animate div to slide to the right like the example below:
but instead of shifting the margin, I want to squish the width but it's not working by changing the width % ( width: '60%' ) it squishes to the left instead..
Not sure if this is exactly what you're looking for but try:
$('#content').animate({
marginLeft: '40%',
width:'60%'
});
Or give right:0 to #content in the CSS, then you can animate the width and it will shrink from left to right without requiring margins. Same effect as the above but cleaner. Fiddle
Also, jQuery has a built-in toggle event for alternating clicks so, if you're toggling just the click event you can use:
$('#content').toggle(function() {
$(this).animate({ width:'60%' });
}, function() {
$(this).animate({ width:'100%' });
});
