Design comparison
Solution retrospective
The script begins by using querySelectorAll to select all elements with the class "accordion" and store them in the acc variable.
A forEach loop is used to iterate through each accordion item, adding a click event listener to toggle the "active" class.
When an accordion item is clicked: If it already has the "active" class, it is removed (closing the accordion). If it doesn't have the "active" class, the script removes the "active" class from all other accordion items and adds it to the clicked item (opening the accordion).
The script effectively ensures that only one accordion item is expanded at a time.
Additional Notes:
The "active" class is likely used in the CSS styles to control the appearance of active accordion items.
Styles for the page are expected to be defined in an external CSS file (main.css), but the content of that file is not provided.
Overall, the code creates a simple FAQ accordion with toggleable sections using HTML for structure and JavaScript for interactivity. The CSS (not provided) would handle the visual styling of the page.
Community feedback
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