FAQ component with JavaScript

Community feedback

• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  From looking at your html structure it's really nice and clearly named classes, so we'll done there!

  To make your html fully valid and accessible, you just need to change the questions into a button tag (an interactive element so you get keyboard and assistive tech functionality, focus state etc) and the answer into a paragraph tag (designed to hold text, unlike a div)

  You could make your js a lot simpler by purely toggling one class like is-open on the closest parent of the question, and handle the rest with css. No need to be changing multiple things on click, just the presence of that class is enough. So css might look like ".is-open .image-class { // rotate icon } etc

  I hope that makes sense and is helpful (if it is, remember to upvote comments 😉)

  1

  ---

  

  Dusan•700

  @DEmanderbagPosted almost 4 years ago

  @grace-snow thank you for this advice, I will try to change HTML structure to make more sense and be more accessible.

  Thank you for the advice with JS and CSS as well, sounds like something I can do thanks.

  0
• 

  Eduek•65

  @the-eduekPosted almost 4 years ago

  Well done!

  It's a near perfect design. To make not more than one accordion at the same time, you could try setting the active states with classes.

  Currently, your JS code would raise inline styles but you could set an accordion active state with a class and toggle that class anytime an accordion is open.

  This way, you could create an array with a length of 2 i.e. use a for loop of i <= 2 of all accordions with the active class and when an accordion is clicked it removes the active state from the first element in the array and only the newly clicked has the accordion active class since on click, that accordion should be toggled the active class.

  1
• 

  T

  Grace•31,230

  @grace-snowPosted almost 4 years ago

  Hi Dušan, It's actually correct implementation to be able to open more than one accordion at a time, that's expected in how this UI pattern is meant to work. If you were only showing one thing at a time, that would be a tab

  0