У меня проблема с фильтрацией страницы коллекции.Я использую тот же набор кода для 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/