This is a solution for Faq According Card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Nabil! 👋

  Good job on this challenge! 👏

  First, make each of the button elements a child element of the h2. This will preserve the semantic meaning of the heading and the button. Also, use aria-expanded to tell assistive technologies about the state of the accordion (whether it is expanded or collapsed).

  The easiest solution to create an accessible accordion is to use the native HTML elements - summary and details.

  I have some more suggestions to improve this solution.

  • Avoid using JavaScript to add styling (unless you have no other option). JavaScript allows you to change the CSS code using the style property. But, to make debugging easier and improve code maintainability, it’s best to avoid it. Use CSS classes instead.
  • Give all the buttons the same class name. Then, use querySelectorAll to select all the buttons. Then, use forEach to add a "click" event listener to each button. This way, you can avoid selecting each of the buttons.
  • I recommend using all classes that begin with js- to select DOM elements within JavaScript. This helps you to separate the styling and the functionality of the elements. Keep in mind, that only use the js- classes only for JavaScript purposes.

  I hope this helps. Happy coding!

  0