Hej, mam problem z "filtrowaniem" elementów.
Zrobiłem proste ćwiczenie. Jeżeli kliknę btn A to filtrują mi się elementy A, odklikuje - pojawiają się wszystkie, to jest ok. Problem pojawia się kiedy po kliknięciu w A, chcę przeskoczyć od razu na B, nie odklikując A. Wtedy A znika i pojawiają się elementy B i C. Prośba o wskazówki co moge zrobić
https://codepen.io/patlewpl/pen/ExwVQoL?editors=1010
document
.querySelector(".a-btn")
.setAttribute("onclick", "toggle_visibility('a')");
document
.querySelector(".b-btn")
.setAttribute("onclick", "toggle_visibility('b')");
document
.querySelector(".c-btn")
.setAttribute("onclick", "toggle_visibility('c')");
function toggle_visibility(id) {
let items = document.querySelectorAll(".item").forEach((item) => {
item.style.display =
!item.classList.contains(id) && item.style.display == "block"
? "none"
: "block";
});
}
<div class="nav">
<span class="btn a-btn">A</span>
<span class="btn b-btn">B</span>
<span class="btn c-btn">C</span>
</div>
<div class="item-cont">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item b">B</div>
<div class="item a">A</div>
<div class="item c">C</div>
<div class="item c">C</div>
</div>
.nav {
display: flex;
}
.nav span {
margin-right: 5px;
}
.item-cont {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
margin-top: 10px;
width: 65%;
}
.item {
width: 100px;
height: 100px;
background-color: #222;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 100px;
}
.btn {
padding: 10px;
border: 1px solid #222;
font-size: 15px;
cursor: pointer;
}
.show {
display: block;
}
.hide {
display: none;
}