Twitter ブートストラップ css および js フレームワークを使用しています。この例では、折りたたみ可能な div が 4 つあります。
1 つの div を開いたときに [すべて展開] ボタンをクリックすると、開いた div が自動的に閉じます。
すべての div を表示したい方法は、一度に展開できます。
たとえば、#about を開いてユーザーがすべて展開ボタンをクリックすると、#about を含むすべてを表示する必要があります。
これを行う簡単な方法はありますか？
コードは次のとおりです。
<section id="accordion">
<a href="#_" class="expandcollapse btn btn-mini btn-primary pull-right" state="0"><i class='icon-white icon-plus-sign'></i> Expand All</a>
<ul class="nav nav-tabs" id="tabFAQ">
<li class="active"><a href="#GQ" data-toggle="tab" state="0">Subscriptions</a></li>
</ul>
<div class="tab-content" id="faqContent">
<div class="tab-pane active" id="GQ">
<div class="accordion" id="generalQuestions">
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Tactial">
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category1">5.11 Tactial<i class="icon-ok-sign success-color"></i>
</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" rel="tooltip" data-placement="right" href="#">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category1" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category1" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Women">
<a href="">Women</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Customer-Is-Anonymous">
<a href="">Men</a>
</li>
</ul>
</div><!--/Apparel End-->
</div>
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Juary" class="regular-checkbox"><label for="Juary"></label>
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category2">Juary</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category2" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category2" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Furniture">
<a href=""> Furniture (Subscribed) </a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Accessories">
<a href="">Home Accessories</a>
</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Dickies" class="regular-checkbox"><label for="Dickies"></label>
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category3">Dickies</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category3" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category3" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Shoe">
<a href="">Shoe</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Swaters">
<a href="">Swaters</a>
</li>
</ul>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading clearfix">
<label class="checkbox pull-left accordion-margin">
<input type="checkbox" id="Puma" class="regular-checkbox"><label for="Puma"></label>
</label>
<a class="accordion-toggle category pull-left" data-toggle="collapse" data-parent="#parent" href="#category4">Puma</a>
<span class="tooltip-demo pull-left"><a class="accordion-toggle category" data-original-title="push special discount offer to the retailer" href="#" rel="tooltip" data-placement="right">(Push Special Discount)</a></span>
<div data-toggle="collapse" data-parent="#parent" href="#category4" class="head-height"> </div>
</div><!--/accordion-heading-->
<div id="category4" class="accordion-body collapse">
<ul class="accordion-inner unstyled">
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Appearel">
<a href="">Appearel</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Sports">
<a href=""> Sports</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Spickes">
<a href=""> Red Spickes Shoe</a>
</li>
<li id="" class="sidelink clearfix">
<input type="checkbox" id="Soccer">
<a href=""> Soccer Shoe</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
//collapsible menu
$('#tabFAQ a').click(function(e) {
e.preventDefault();
$(this).tab('show');
})
$('.expandcollapse').click(function() {
var newstate = $(this).attr('state') ^ 1,
icon = newstate ? "minus" : "plus",
text = newstate ? "Collapse" : "Expand";
$('.nav-tabs').children().each(function(index) {
if($(this).hasClass('active')) {
var tab = $(this).children(':first');
toggleTab(tab.prop('hash'));
tab.attr('state',newstate);
}
});
$(this).html("<i class=\"icon-white icon-" + icon + "-sign\"></i> " + text +" All");
$(this).attr('state',newstate)
});
$('a[data-toggle="tab"]').on('shown', function (e) {
var myState = $(this).attr('state'),
state = $('.expandcollapse').attr('state');
if(myState != state) {
toggleTab($(this).prop('hash'));
$(this).attr('state',state);
}
})
function toggleTab(id){
$(id).find('.collapse').each(function() {
$(this).collapse('toggle');
});
}