FAQ accordion card tools used include HTML/CSS and JS

Community feedback

• 

  

  Chamu•13,860

  @ChamuMutezva

  Posted over 4 years ago

  So far so good. Attend to the issues raised in the report, eg you can not use an ID name more than once, rather opt to use a class instead. Another option for the accordion is to use the details-summary tag. Happy coding.

  10
• 

  

  Grace•32,130

  @grace-snow

  Posted over 4 years ago

  Hey!

  I'll copy what I put on Slack for you here so you've got a permanent record ☺

  This comes down to 'thinking like a developer' which comes in time.

  You're right to ask these kinds of questions and want to keep your code DRY (do not repeat yourself).

  I would

  • In html, have all the questions in a list, with the lis forming a wrapper around each question and answer (like your question box).
  • Give each list item a class I could hook onto in javascript like js-faq-wrapper. (The js- prefix isn't important, it's just a convention I like to use so I can see what classes are used in javascript from glancing at html and keep them separate from style classes)
  • Put each question text inside a button that's wrapped by a h2, and add a class on those buttons like js-faq-toggle.
  • Put each answer in a div > p underneath the h2
  • In javascript I would querySelectorAll to get the question buttons (find all js-faq-toggles)
  • Then I'd use a forEach loop to loop over each button and add an event listener that runs a function on click (called something like toggleFaq)
  • I'd define that function separately. It would take in the event as an argument. It would look for the closest element with a js-faq-wrapper class and toggle another class on it (something like is-open)
  • Then I would control the visibility of the question purely CSS, based on whether or not its parent has that is-open class on it. (I'd probably use properties like visibility, opacity, height so I could animate the open/close rather than display none, which cannot be animated)

  Hope that helps! 👍

  02
• 

  Web Frog•1,840

  @MasterDev333

  Posted over 4 years ago

  Great work. My suggestions here.

  • To load google font, please click link in style-guide.md file and select fonts in google font page. Then you can copy link or @import in right panel. Don't forget use font-family to set fonts.
  • Set overflow: auto to accordion wrapper. Now, when you expand all items, it's cutting.
  • You should use javascript for accordion and your solution is pretty good. Here's my solution. https://www.frontendmentor.io/solutions/responsive-faq-nApZmbSnl Hope it helps. Happy coding ;)

  00