FAQ-accordion (HTML and CSS only)

Community feedback

• 

  Muhammad Zariyan Asif•150

  @MuhammadZariyanAsif123Posted 12 months ago

  Hi,

  You can fixed this issue by setting the body with background-image with this pattern and background-repeat = "no - repeat" something like this.

  In CSS FILE:

  body { background-image: url("your image"); background-repeat: no-repeat; }

  0
• 

  Weston Vincze•30

  @WestonVinczePosted 12 months ago

  Great job taking the first steps to learning web development!

  Responsive "hero" images are a bit tricky. The reason the height changes is because if the width is 100% the only way to maintain the correct aspect ratio is to shrink the height. There are many approaches to solve this problem, each with its own trade off.

  I solved this problem by setting a fixed height for the background-image and aligning it to the top center of the page. That way as the screen shrinks the image height stays the same and the edges get cropped. The reason I chose this solution is because I wanted to ensure that the FAQ section and hero image retained their overlapping positions.

  Also, HTML5 has relatively new <details> and <summary> elements that can create collapsible content (like an accordion) without the need for JavaScript. The browser support is somewhat limited but that's not a problem for a task like this.

  // details is a wrapper element
  <details>
    // summary is where you would put the "question"
    <summary>
      (question)
    </summary>
    // anything inside details and outside of the summary tag will be hidden or shown when the summary is clicked
    <p>
      (answer)
    </p>
  </details>
  

  0