Aruta,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul{
list-style: none;
}
.filter__list{
display: flex;
}
li.active-show .filter__list{
color: #8B4513;
font-weight: bold;
}
.filter__list + div{
display: none;
}
li.active-show .filter__list + div{
border: 1px solid #FF0000;
display: block;
}
.filter__list:after{
content: "▼"
}
li.active-show .filter__list:after{
content: "▲"
}
</style>
</head>
<body>
<ul class="results__filter-inner dflex">
<!-- Блок конкретного фильтра. Далее каждая группа фильтров обозначена li id="название фильтра" -->
<li id="gender">
<!--Блок названия группы фильтра и стрелочки -->
<div class="filter__name filter__list">
<div>Gender</div>
</div>
<!--Раскрывающийся список группы -->
<div class="filter__name__list-wrap dflex">
<div class="name__list-inner">
<div class="name__list">
<input type="checkbox" id="chk_men" class="toggle" name="chk_men" value="Men">
<label for="chk_men" class="name__list-label">Men</label>
</div>
<div class="name__list">
<input type="checkbox" id="chk_women" class="toggle" name="chk_women" value="Women">
<label for="chk_women" class="name__list-label">Women</label>
</div>
</div>
</div>
</li>
<li id="priority">
<div class="filter__name filter__list">
<div>Priority</div>
</div>
<div class="filter__name__list-wrap">
<div class="name__list-inner">
<div class="name__list">
<input type="checkbox" id="chk_color" class="toggle" name="chk_color" value="Color">
<label for="chk_color" class="name__list-label">Color</label>
</div>
<div class="name__list">
<input type="checkbox" id="chk_style" class="toggle" name="chk_style" value="Style">
<label for="chk_style" class="name__list-label">Style</label>
</div>
</div>
</div>
</li>
<li id="prod_type">
<div class="filter__name filter__list">
<div>Product type</div>
</div>
<div class="filter__name__list-wrap" >
<div class="name__list-inner">
<div class="name__list">
<input type="checkbox" id="chk_shirt" class="toggle" name="chk_shirt" value="Shirt">
<label for="chk_shirt" class="name__list-label">Shirt</label>
</div>
<div class="name__list">
<input type="checkbox" id="chk_blouse" class="toggle" name="chk_blouse" value="Blouse">
<label for="chk_blouse" class="name__list-label">Blouse</label>
</div>
<div class="name__list">
<input type="checkbox" id="chk_top" class="toggle" name="chk_top" value="Top">
<label for="chk_top" class="name__list-label">Top, T-shirt, Sweatshirt</label>
</div>
<div class="name__list">
<input type="checkbox" id="chk_sweater" class="toggle" name="chk_sweater" value="Sweater">
<label for="chk_sweater" class="name__list-label">Sweater</label>
</div>
</div>
</div>
</li>
<li>
<input type="checkbox" id="dublicate" class="toggle" name="dublicate">
<label for="dublicate">Remove dublicate</label>
</li>
<li>
<div class="filter__name clear">
<div>Clear</div>
</div>
</li>
</ul>
<script>
const ul = document.querySelector('.results__filter-inner');
let tempLi;
document.addEventListener('click', event => {
let filterUl = event.target.closest('ul');
let li = event.target.closest('li');
if (tempLi && li != tempLi) {
tempLi.classList.remove('active-show');
tempLi = null;
}
if (filterUl == ul) {
if (li.querySelector('.filter__list')) {
tempLi = li;
let input = event.target.closest('[type="checkbox"]');
if (input) li.querySelectorAll('[type="checkbox"]').forEach(el => el != input && (el.checked = false));
if (event.target.closest('.filter__list')) tempLi.classList.toggle('active-show');
}
if (li.querySelector('.clear')) {
ul.querySelectorAll(':checked').forEach(el => el.checked = false);
}
}
})
</script>
</body>
</html>