一次滑出单个div

时间:2017-05-26 08:00:34

标签: html css

https://jsfiddle.net/SDCH/qqq58vsr/

<input type="checkbox" id="showblockone">
<div id="slideout">
    <label id="slideout_tab2" for="showblockone" title="Track your Order">
        <i class="fa fa-cart-arrow-down fa-2x" aria-hidden="true"></i>
    </label>
    <div id="slideout_inner" style="top: 51px;
">
<span>Track your Order</span>
    </div>
</div>
<br><input type="checkbox" id="showblocktwo">
<div id="slideout" class="blockTwo">
    <label id="slideout_tab3" for="showblocktwo" title="Refer to Friend">
        <i class="fa fa-users fa-2x" style="margin-left: -7px;"></i>
    </label>
    <div id="slideout_inner" style="    top: 102px;height: 54px;">
<span>Refer to Friend</span>
    </div>
</div>
<br><input type="checkbox" id="showblockthree">
<div id="slideout">
    <label id="slideout_tab4" for="showblockthree" title="Refer to Friend">
        <i class="fa fa-exchange fa-2x" style="margin-left: -7px;"></i>
    </label>
    <div id="slideout_inner" style="top: 160px; height: 54px;">
<span>Easy Return</span>
    </div>
</div>

如何一次只制作一个div滑动并在其他div中滑动如果有任何其他div滑出来进行演示请查看jsfiddle链接

1 个答案:

答案 0 :(得分:0)

您必须使用具有相同input type="radio"属性的name

我做了一些改动。我希望它会对你有所帮助。

Working Demo