При загрузке страницы показаны все элементы (в поле <div id="choise">
так же показаны все варианты)
Когда выбираем показ определенных данных в поле "choise" должно выводиться только выбранное если отменить выбор все возвращается в исходное состояние.
document.querySelectorAll('[data-control]').forEach(item => {
item.addEventListener('click', event => {
event.preventDefault();
handleFilterItems(item);
});
});
function handleFilterItems(filterItem) {
if (filterItem.getAttribute('data-control') === '' || filterItem.getAttribute('data-control') === '.all') {
document.querySelectorAll('[data-control]').forEach(item => {
item.classList.remove('_active');
});
} else {
document.querySelector('[data-control=".all"]').classList.remove('_active');
}
if (filterItem.classList.contains('_active')) {
filterItem.classList.remove('_active');
// check if no other filter item is active
if (!document.querySelectorAll('[data-control]._active').length) {
document.querySelector('[data-control=".all"]').classList.add('_active');
}
} else {
filterItem.classList.add('_active');
}
handleFilterTeaser();
}
function handleFilterTeaser() {
document.querySelectorAll('.all').forEach(item => {
item.classList.add('_hidden');
});
if (document.querySelectorAll('[data-control]._active').length === 0) {
document.querySelectorAll('.all').forEach(item => {
item.classList.remove('_hidden');
});
} else {
document.querySelectorAll('[data-control]._active').forEach(item => {
let filterTag = item.getAttribute('data-control');
document.querySelectorAll(filterTag).forEach(tag => {
tag.classList.remove('_hidden');
});
});
}
}
ul,
li {
list-style: none;
display: inline-block;
}
button {
padding: 10px;
}
button:hover {
color: green;
}
button._active {
color: tomato;
}
.list>div {
background: grey;
margin-bottom: 10px;
color: #fff;
padding: 10px;
}
._hidden {
display: none;
}
.show-choice {
width: max-content;
border: 1px solid red;
padding: 10px;
margin: 0 0 20px;
}
._hidden {
display: none;
}
.show-choice {
width: max-content;
border: 1px solid red;
padding: 10px;
margin: 0 0 20px
}
<div>
<ul>
<li>
<button class="_active" data-control=".all">all</button>
</li>
<li>
<button data-control=".a">a</button>
</li>
<li>
<button data-control=".b">b</button>
</li>
<li>
<button data-control=".c">c</button>
</li>
</ul>
<div class="show-choice">
<div id="choise">
<span>a 1, b 2, a b 3, b 4, a 5, c 6</span>
</div>
</div>
</div>
<div class="list">
<div class="all a">a 1</div>
<div class="all b">b 2</div>
<div class="all a b">a b 3</div>
<div class="all b">b 4</div>
<div class="all a">a 5</div>
<div class="all c">c 6</div>
</div>