Responsive FAQ Accordian

Community feedback

• 

  Marzia Jalili•3,920

  @MarziaJaliliPosted about 2 months ago

  Hi there!

  The project works as expected. It looks great.

  Some areas you can amand:

  • First, every page should have an <h1> element. You might have gotten that error in the report for this. Change <h2>FAQs</h2> to <h1>FAQs</h1> to fix the issue.

  • Second, there is no need to set a separate element in html for the background image (<section class="upper-part">).

  Instead use the background-image property to get it done, take the code below as an example:

  body {
    background-image: url("path of the image");
    background-repeat: no-repeat; /* we only need one of it */
    background-position: top;
    background-size: 100%; /* to take the entire horizontal space*/
  }
  

  • In addition, instead of using an image for the toggle buttons, use the <button> element an then wrapp the image inside. This gives more information to the screen readers and specifies it's a button rather than an actual image.

  The <button> element comes with some default styles. So, get rid of them using the code below:

  button {
    border: none;
    background-color: transparant;
  }
  

  • And finally, there's no need for two images for toggling. You can have only one and then in js only change the src of the image.

  For example, you can set it like this:

  // use const instead of let unless you have to change the
  // value of the variable, let is only used if you want the
  // value to be able to get assigned to some other value
  
  const plusIcon = document.querySelectorAll('.plus-icon');
  
  if(computedStyle.display === 'none') {
    plusIcon[index].src = "the path of the minus icon"
  } else {
    plusIcond[index].src = "the path of the plus image"
  };
  

  Hope this answers your question 😎

  Marked as helpful

  0

  ---

  

  Shah Faisal•170

  @Shah-Faisal-cloudPosted about 2 months ago

  Just wanted to say thanks for always taking the time to simplify my code. I appreciate you making things more efficient.

  1