[英]How to make two collapsible div mutually exclusive
我有两个基于Twitter的bootstrap的可折叠div A(collapseOne)和B(collapseTwo)。 当B展开时,如何使A折叠?反之亦然?
我的代码如下所示
<div class="shop-details" id="shop-accordion">
<div id="collapseOne" class="shop-brief clearfix collapse hide">
<h2 class="yahei ft30">MyName</h2>
<span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseOne"><i class="path-down"></i>Show details</a></span>
</div>
<dl id="collapseTwo" class="shop-ds clearfix collapse in">
<dt>
<a href="#" target="_parent"><img src="images/pt-small.jpg" width="246" height="169"></a>
<div class="shop-ds-txt">
<h2 class="yahei ft30">MyName</h2>
<ul class="shop-ds-ul">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</div>
</dt>
<dd>
<div class="unfold-positon">
<div><span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseTwo"><i class="path-up"></i>Show brief</a></span></div>
</div>
</dd>
</dl>
</div>
我想div的collapseOne
是隐藏的, collapseTwo
可见默认。 点击链接后Show brief
,使collapseTwo
隐藏collapseOne
所示。
只需使用它们随文档提供的示例即可 。 我在这里为您简化了此操作,请确保所有div都具有相同的data-parent
,以便充当手风琴。
<div class="accordion" id="my-accordion">
<div class="accordion-group">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseOne">
Toggle 1
</a>
<div id="collapseOne" class="accordion-body in" style="height: auto; ">
<div class="accordion-inner">
Inner content 1
</div>
</div>
</div>
<div class="accordion-group">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordian" href="#collapseTwo">
Toggle 2
</a>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Inner content 2
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.