Design comparison
SolutionDesign
Solution retrospective
I'm still learning JS, any feedback on js code ?? I focus on javascript .. lazy to finish CSS :D
Community feedback
- @JorgeIturrietaPosted over 2 years ago
Hi Mahmoud ! Your Javascript code looks good but i think you forgot when an item is active and the user clicks on it, it should close A possible solution to do tath is:
const tabsLi = document.querySelectorAll(".section"); function handleToggle() { let firstChild = this.firstElementChild; let lastChild = this.lastElementChild; // Toggle Action if (lastChild.classList.contains("show")) { firstChild.classList.remove("active"); lastChild.classList.remove("show"); } else { lastChild.classList.add("show"); firstChild.classList.add("active"); } } tabsLi.forEach((tab) => tab.addEventListener("click", handleToggle));
This challenge can be done without JavaScript. You can check my solution if you want. FAQ accodion card
I hope I've helped you and keep it up!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord