FAQ accordion card using HTML, CSS, JS

Community feedback

• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, Greeshma! 👋

  Good job on this challenge! Your solution looks good and the accordion works rather well! 👍

  In addition to tediko's great feedback, I suggest,

  • Centering the accordion on the page using flexbox (or auto margins, if you'd like) so that it always remains centered even when the page is resized. 😉

  Keep coding (and happy coding, too)! 😁

  11
• 

  tediko•6,700

  @tediko

  Posted over 4 years ago

  Hello, Greeshma! 👋

  You did good job on this challenge! Let's look at your problem.

  • The content property should be used with the ::before and ::after pseudo-elements, to insert generated content, you try to use that property on normal element. What i can suggest is to move your .box-img html to .container and set image src. Then position it with position: absolute and top/left properties. If you want to keep your first thought and do it with css you need to create ::before pseudo-element on .container or other element and then you can use content property with image url on this pseudo-element.
  • This also aplies to your arrow images in faq. Try not to repeat your HTML code with image for each arrow. Easier way around is to use pseudo element ::before on your .question element. Set it to position: relative and your pseudo element as position: absolute. Put your image using content: url(image.jpg).

  Good luck with that, have fun coding! 💪

  11