Question

I’m not asking how to show/hide content upon click.

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.

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:

JQUERY

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

in the markup side, both divs are position – relative:

HTML

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

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.

Answer 1

Assuming a structure such as:

<div id="accordionWrapper">
    <div id="UpperDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>

    <div id="MiddleDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>

    <div id="BottomDiv" class="accordionSlides">
        <h2>Accordion tab</h2>
        <!-- other content, 'p' elements in the demo -->
    </div>
</div>​

Then I’d suggest:

$('#accordionWrapper .accordionSlides').click(
    function(){
        var cur = $(this);
        cur.siblings().children().not('h2').slideUp(); // hides
        cur.find('p').slideToggle(); // shows
    });​

JS Fiddle demo.

References:

• children().
• click().
• find().
• not().
• slideToggle().
• slideUp().