我有一个问题是收集页面的过滤。我为3个博客使用相同的代码集，但是当我选择该选项时，所有三个手风琴菜单都在扩展。我只希望选择该选项时只打开相应的列表。例如 当在过滤器中选择“金属”时，其他过滤器选项会扩展，如何使过滤器保持静态而不进行选择后扩大或最小化？
Javascript：
ajaxFilterData = function(data){
var currentList = $("#proListCollection .proList");
var dataList = $(data).find("#proListCollection .proList");
currentList.replaceWith(dataList);
if ($("#collPagination").length > 0) {
$("#collPagination").replaceWith($(data).find("#collPagination"));
} else {
$("#proListCollection").append($(data).find("#collPagination"));
}
var currentSidebarFilter = $("#sidebarAjaxFilter");
var dataSidebarFilter = $(data).find("#sidebarAjaxFilter");
currentSidebarFilter.replaceWith(dataSidebarFilter);
}
HTML：
<div class="content_sidebar">
<div id="sidebarAjaxFilter" class="velaFilter">
<div class="ajaxFilter">
<h4 class="ajaxFilterTitle titleSidebar ">
<span>Filter by Metal</span>
<a href="javascript:void(0)" class="velaClear tofi-clear" style="display:none;">Clear</a>
</h4>
<ul class="listFilter velaContent list-unstyled" style="display: none;">
<li data-filter="sterling-silver">
<a href="/collections/all/sterling-silver"
title="Narrow selection to products matching tag Sterling Silver">Sterling Silver</a>
</li>
<li data-filter="gold-plated">
<a href="/collections/all/gold-plated"
title="Narrow selection to products matching tag Gold Plated">Gold Plated</a>
</li>
</ul>
</div>
<div id="velaCategories" class="velaCategoriesSidebar">
<h3 class="titleSidebar">Categories</h3>
<div class="velaContent" style="display: none;">
<div class="itemCategory">
<h4 class="cateTitle">
<a class="cateItem " href="/collections/unique-necklaces">Necklace</a>
</h4>
</div>
<div class="itemCategory">
<h4 class="cateTitle">
<a class="cateItem " href="/collections/boho-rings">Ring</a>
</h4>
</div>
</div>
</div>
<div class="ajaxFilter">
<h4 class="ajaxFilterTitle titleSidebar">
<span>Filter By</span>
<a href="javascript:void(0)" class="velaClear" style="display:none">Clear</a>
</h4>
<ul class="listFilter velaContent list-unstyled" style="display: none;">
<div class="velaCategoriesSidebar tofi-categories-sidebar">
<div class="tofi-content velaContent" style="display: none;">
<div class="itemCategory">
<h4 class="cateTitle">
<a class="tofi-filter-option cateItem hasSubCategory active collapsed"
data-toggle="collapse" href="#filterTypeStones" aria-expanded="false">Stones</a>
</h4>
<div id="filterTypeStones" class="collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul class="tofi-list listFilter list-unstyled">
<li data-filter="blue-zircon">
<a href="/collections/all/blue-zircon"
title="Narrow selection to products matching tag Blue Zircon">Blue
Zircon</a>
</li>
<li data-filter="citrine">
<a href="/collections/all/citrine"
title="Narrow selection to products matching tag Citrine">Citrine</a>
</li>
<li data-filter="crystals">
<a href="/collections/all/crystals"
title="Narrow selection to products matching tag Crystals">Crystals</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="velaCategoriesSidebar tofi-categories-sidebar">
<div class="tofi-content velaContent" style="display: none;">
<div class="itemCategory">
<h4 class="cateTitle">
<a class="tofi-filter-option cateItem hasSubCategory active collapsed"
data-toggle="collapse" href="#filterTypeSymbols" aria-expanded="false">Symbols</a>
</h4>
<div id="filterTypeSymbols" class="collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<ul class="tofi-list listFilter list-unstyled">
<li data-filter="buddha-of-compassion">
<a href="/collections/all/buddha-of-compassion"
title="Narrow selection to products matching tag Buddha of Compassion">Buddha
of Compassion</a>
</li>
<li data-filter="chakra">
<a href="/collections/all/chakra"
title="Narrow selection to products matching tag Chakra">Chakra</a>
</li>
<li data-filter="elephant">
<a href="/collections/all/elephant"
title="Narrow selection to products matching tag Elephant">Elephant</a>
</li>
<li data-filter="evil-eye">
<a href="/collections/all/evil-eye"
title="Narrow selection to products matching tag Evil Eye">Evil Eye</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="velaCategoriesSidebar tofi-categories-sidebar">
<div class="tofi-content velaContent" style="display: none;">
<div class="itemCategory">
<h4 class="cateTitle">
<a class="tofi-filter-option cateItem hasSubCategory active collapsed"
data-toggle="collapse" href="#filterTypePrice" aria-expanded="false">Price</a>
</h4>
<div id="filterTypePrice" class="collapse" aria-expanded="false" style="height: 0px;">
a <div class="panel-body">
<ul class="tofi-list listFilter list-unstyled">
<li data-filter="0-00-99-99">
<a href="/collections/all/0-00-99-99"
title="Narrow selection to products matching tag $0.00 - $99.99">$0.00 -
$99.99</a>
</li>
<li data-filter="100-00-199-99">
<a href="/collections/all/100-00-199-99"
title="Narrow selection to products matching tag $100.00 - $199.99">$100.00
- $199.99</a>
</li>
<li data-filter="200-00-299-99">
<a href="/collections/all/200-00-299-99"
title="Narrow selection to products matching tag $200.00 - $299.99">$200.00
- $299.99</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
```````
when I select any value inside the accordion it should only expand the selected toggle class. It should not make siblings accordion also expand. But current javascript makes all other filters expand when I select the dropdown in one option/