FAQ Accordion

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Joshua Watson! 👋

  For the icon rotation, as far as the CSS you can use transform property. After that, you can add a styling where if the button has the class of active then make the icon rotate 180deg.

  Also, there are a couple of things that you need to do to improve the current site.

  • Currently, even though you have used button elements to create the accordion, there is still no way for screenreaders to know whether or not the accordion is opened or already closed. So, I would recommend using the native HTML elements instead, summary and details tags. By default, they already come with the close-and-open functionality and is accessible by screenreaders.
  • So, for the JavaScript, I would recommend creating a function where it only allows the users to open one accordion panel at a time. It is a good feature to add because it will prevent the card from stretching vertically because all the accordion panels are opened.
  • Avoid using JavaScript to add styling (unless you've 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.
  • I would recommend using ES6 JavaScript (such as using const and let, forEach, etc). ES6 has a great support so I would recommend using it (or learning it if you haven't learned about it).

  That's it! Hope this helps. Good luck on finishing this challenge! 😉

  Marked as helpful

  1

  ---

  

  Joshua Watson•150

  @JoshLanderzPosted over 2 years ago

  @vanzasetia Hey there!, thank you so much for the help and tips :)

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @JoshLander18 You're welcome, Joshua! 👍

  0