Question

I have a div that I want to show/hide when clicking a button. The arrangement of the div‘s is

<div id="someStats">
</div>
<div id="mainContent">
</div>
<div id="someOtherStats">
</div>

, meaning that from the mainContent I control whether to show or hide the two info div‘s left and right. That gives me following problem: not only fadeToggle() makes one of the div‘s transparent, its display attribute is set to none, which causes a displacement of the mainContent when fading out someStats. Are there alternatives to fadeToggle() without specifing two functions (or splitting a function like

if(div.isShown()){
   hide() 
}else{ 
   show()
}

? Or can I manipulate fadeToggle() in some way?

Answer 1

You can just animate the opacity

var target = $('#someStats'),
    opacity = target.css('opacity');

target.animate({opacity: (opacity==1?0:1)});

Demo at http://jsfiddle.net/gaby/MNhcU/