html - 一次滑出一个div

Question

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 链接

Answer 1

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

我对它做了一些修改。希望对您有所帮助。

Working Demo