using flexbox, js

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted over 4 years ago

  Hi,

  I think the whole FAQ should be clickable to open close. At the moment that icon being the only trigger for the faq is a really small click trrget for people and expected behaviour is that you can click a whole row in designs like this.

  I would advise simplifying your html. At the moment, assistive tech would announce your faq list as having double the number of items because you've put the answers inside their own <li>s. Instead, if you nested inside the faq li a button>h2 for the question, followed by a p for the answer, all would sit within the same list item.

  Having looked at your js, if you simplified your html like this it could all be a lot simpler as well. You could just toggle an active class to the faq-question container and use the presence of that class to show/hide the faq.

  Either way, some of the styles youre adding in js are not really necessary (eg font size increasing on the faq when open instead of just making bold) and might be better just done with a class in css.

  I hope those are helpful ideas, keep going

  10
• 

  Arturo Simon•1,805

  @artimys

  Posted over 4 years ago

  Hi EsraaGamal-22, nice attempt at the solution.

  Some tips on the desktop images:

  Utilize the background-image property for the shadow image on <div class='img-card'> container. For the desk and box images, make those containers position: absolute; and position usingtop and left properties. Be sure that img-card container is position: relative. You'll notice that you can control the images position relative to your container.

  Suggestion on Answer containers:

  Another way to think of the show/hide for answers. Imagine your li.answer is a div (display: inline-block) and it's inside your li.question. You can try applying a bottom-border on your li.question and remove <li class='line'> item.

  Other:

  • FQA heading typo and apply hover styling on the question
  • apply click event to question like the arrow to display answer

  Hope it helps and keep on coding

  15
• 

  

  ApplePieGiraffe•30,525

  @ApplePieGiraffe

  Posted over 4 years ago

  Hey, esraagamal! 👋

  It's me again! 😆

  Nice effort on this challenge! 👍

  Your solution looks good in the desktop layout, but as artimys mentioned, the illustration and floating cube seem to move all around the place when the page is resized. Following artimys' suggestions should help a lot though! 🙂

  Also, for some reason, I can't open any of the FAQs on the accordion card. You might want to look into that to see what's going on. 😉

  Keep coding (and happy coding, too)! 😁

  03