使第二个div从上到下滑动

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... where as when i click the second div it opens from right to left...it should open from top to bottom... how to fix it....

我正在隐藏和显示功能...我的代码中有一个错误...当我点击第一个div ...内容从下到上打开...当我点击第二个div时它打开从右到左......它应该从上到下打开......如何解决它......

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"); 
    });
});

1 个解决方案

#1

I`ve made some changes to your HTML structure.

我对你的HTML结构做了一些改动。

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

你可以在这里看到更新: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:

对于CSS:

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

#1