Filter knop +/-

[Annevd]

Bij de filter knop, als de filters zijn uitgeklapt kan je het plusje naar een min(-) veranderen zodat het duidelijk is wat de knop nu doet.

[Annevd]

Dit is hoe ik het gedaan heb:

<button class="filter">Filter <span class="show-filter">+</span><span class="hide-filter">-</span></button>

Ik heb van de plus en min een span gemaakt zodat ik er in CSS een class aan kan toevoegen met display: inline; en display: none;

.hide-filter,
.show-filter.hide {
  display: none;
}

.hide-filter.show,
.show-filter {
  display: inline;
}

Deze toggle ik in JavaScript:

const hideFilter = document.querySelector(".hide-filter")
const showFilter = document.querySelector(".show-filter")

filterButton.addEventListener("click", function() {
  hideFilter.classList.toggle("show");
  showFilter.classList.toggle("hide");
})