SASS + Vanilla Javascript FAQ Accordion Card Solution

Community feedback

• 

  Mohamed ELIDRISSI•455

  @elidrissidevPosted about 3 years ago

  Hey Felipe, great work on this solution!

  Here are my suggestions:

  • Just in case you don't know, you can build the whole accordion without a single line of JavaScript using <\details\> and \<summary\> elements.
  • The way you've built the accordion works perfectly. Here's a good read about creating accessible accordions

  Good luck, and keep it up!

  Marked as helpful

  0

  ---

  

  Felipe Pacelli•140

  @flp-pcllPosted about 3 years ago

  @elidrissidev Thank you, Mohamed! This link with the Acessibility Guidelines will be very helpful to improve my html markup because this is a point in which i always get confused.

  I had read about building the accordion component only with html when i got stuck with the arrow-icon part (i was working with the <svg> so the event.target was a mess between the <svg> and <path>) but i decided to stick with the initial plan to make it work, but i will definetly make use of the <details> tag to see how it works!

  0

  

  Mohamed ELIDRISSI•455

  @elidrissidevPosted about 3 years ago

  @flp-pcll You can use pointer-events: none on the <svg> and it will prevent it from becoming the event.target even when it's clicked! Hope that saves you the headache like It did for me 😉

  Marked as helpful

  0