使第二个 div 从上到下滑动

Question

I am working on hide and show functionality. I have one bug in my code; when I click the first div, the content is opening from down to top, whereas when I click the second div it opens from right to left. It should open from top to bottom. How to fix it?

Providing my code below:

http://jsfiddle.net/2syzQ/45/

 <div id='firstRadio'>
        <div class="first" > First </div>
        <div class="arrow-down"></div>
    </div>


$(document).ready(function() {
    $("#firstRadio").click(function() {
        $("#secondHiddenDiv").hide("slow");
        $("#firstHiddenDiv").show("slow");
    });
    $("#secondRadio").click(function() {
        $("#firstHiddenDiv").hide("slow");
        $("#secondHiddenDiv").show("slow");
    });
    $("#thirdRadio").click(function() {
        $("#firstHiddenDiv, #secondHiddenDiv").hide("slow"); 
    });
});

Answer 1

I`ve made some changes to your HTML structure.

You can see the update here: http://jsfiddle.net/2syzQ/51/

HTML:

<div class="first" id='firstRadio'> 
    First 
    <div id='firstHiddenDiv'>
        <div class="arrow-down"></div>
       Text
    </div>
</div>
<div class="second" id='secondRadio'> 
    Second 
    <div id='secondHiddenDiv'>
        <div class="arrow-down"></div>
        Text
    </div>
</div>

For the CSS:

#container > div { position: relative; } 
.first > div, .second > div { position: absolute; top: 20px; left: 0; }