how does accordion works?
<p>I'm not asking how to <code>show/hide</code> content upon <code>click</code>.</p>

<p>All I want to know is how by placing 2 divs, one on top the other, I can get the effect that by clicking on the bottom div, it "closing" the upper div. that's all. Not exactly accordion, but this is enough for my situation.</p>

<p>I tried to achieve this by animating the upper div height to 0, after clicking the bottom div. It works but not smoothly enough. and IE browsers didn't like it:</p>

<p><strong>JQUERY</strong></p>

<pre><code>$('#BottomDiv').click(function() {    
    $('#UpperDiv').animate({ height: '0px' }, "slow");
});
</code></pre>

<p>in the markup side, both divs are position - relative:</p>

<p><strong>HTML</strong></p>

<pre><code>  &lt;div id="UpperDiv" style="height:190px; width:100%; margin-top:80px; position:relative"&gt;
  &lt;/div&gt;
  &lt;div id="BottomDiv" style="width:100%; position:relative; z-index:10; float:left;" &gt;
  &lt;/div&gt;
</code></pre>

<p>So I was just curious maybe there is a better way to achieve this, like jQuery accordion does it. Smooth and works for all browsers.</p>
