Advanced toggling with 3rd param of force
Wed Dec 11 2024 21:56:52 GMT+0000 (Coordinated Universal Time)
Saved by
@davidmchale
// toogle class that takes in the element, the class we want to toggle and force
//force can be set to or false to set the class to show always
const toggleClass = (element, className, force) => {
element.classList.toggle(className, force);
};
// were using this function to hide and show on an element that is clicked only
// this is why current target is passed into the function,
// the second param we are also passing force, but setting to true so
const toggleSpan = (currentTarget, force = true) => {
const compareBlock = currentTarget.closest(".compare-block");
const currentSpan = compareBlock.querySelector("span");
toggleClass(currentSpan, "show", force);
if (currentSpan.className.indexOf("show") > -1) {
currentSpan.setAttribute("aria-hidden", "false");
} else {
currentSpan.setAttribute("aria-hidden", "true");
}
};
compareBtns.forEach((button) => toggleSpan(button, false));
content_copyCOPY
advanced toggling
Comments