Faq Accordion Card

Hey Goorezy, Well done ! your solution works well. In order to answer your query I would like to suggest some key points you should consider

1. Avoid writing more code on html, I go through your code and I found your html contain lots of div instead use div only where it need. Using lots of div and classes will mesh you up when you write code for CSS and JavaScript.
2. Avoid pasting full SVG code on html instead use <img src=".svg" alt="svg here"> this will make your html content shorter and readable.
3. When you work with JavaScript if there are no. of DOM elements and then adding every element a event listener this creates problem. Avoid using many query selector in same type of event instead use query selector all like for button click you can write const btn = document.querySelecterAll("button"); this will select all the buttons on your page then you can differentiate button by giving them proper id and then apply event listener like btn.forEach(sbtn=> {sbtn.addEventListener("click", function)}); here sbtn indicates a single button.

Hope it help you in improving your solution....

Hi, Goorezy! 👋

Before diving into JavaScript, we need to get the HTML right first. I suggest using the native HTML elements for the accordion panels, summary and details. This way, you don't need to worry about the accessibility of the accordion since they are accessible by default. There's no way for screenreader users to know whether or not the accordion is expanded or collapsed.

Next for the CSS, I suggest creating a custom :focus-visible styling for the accordion. This will let people who use a keyboard to navigate the site know where they are currently on the page.

For JavaScript, I want to say that as a user I have to close the expanded accordion first before I can expand another accordion panel. This is not a good user experience since the user can expect that the app is not working. So, the better approach is to create a function that automatically closes the expanded accordion.

I would recommend using forEach to check every accordion element. If there is an opened accordion, you want to close it. After that, the clicked accordion should be expanded.

That's it! I hope this helps! 🙂