This is a solution to the FAQ accordion card challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See hover states for all interactive elements on the page
- Hide/Show the answer to a question when the question is clicked
- Live Site URL: FAQ accordion card
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vanilla JavaScript
Here the code I wrote to make the Hide/Show effect:
cconst btnList = document.querySelectorAll(".btn");
btnList.forEach( (btn) => {
btn.addEventListener("click", function () {
this.classList.toggle("isOpen");
let content = this.nextElementSibling;
if(content.style.height !== "") {
content.style.height = "";
}
else {
content.style.height = content.scrollHeight + 'px';
}
hideAll(this);
})
})
const hideAll = (notThis) => {
btnList.forEach((btn) => {
if(btn !== notThis) {
btn.classList.remove("isOpen");
let content = btn.nextElementSibling;
content.style.height = "";
}
})
}
It was my first project using JavaScript and I still have a lot to learn, so for the next project I will continue to practice.
- Frontend Mentor - @KevynSM