Juan Pujol• 70
@joanpujol
Posted
First of all, great-looking solution!
On the JS side, one way to simplify your code would be to use a click listener for each item that toggles an active class for that item.
faqItems.forEach(item => {
item.addEventListener("click", () => {
item.classList.toggle("active");
});
});
I hope it helps.
1
Adam Alberty• 105
@AdamAlberty
Posted
@joanpujol Thanks a lot man! I didn't even think somebody would actually look at my stuff. I tried to make it that way, but couldn't figure it out. Another thing is that I wanted to make it so that when I click one item (to show the FAQ), the other ones hide.
PS: Sorry I replied this late.
1
Juan Pujol• 70
@joanpujol
Posted
@AdamAlberty No problem! :)
Regarding the second problem. If you just want one item active at the time, you can first look for any active item, toggle it off, and then activate the selected item.
faqItems.forEach(item => {
item.addEventListener("click", () => {
const activeItem = document.querySelector(".active");
activeItem.classList.toggle("active");
item.classList.toggle("active");
});
})
I hope it helps!
1
