Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion using HTML and CSS (no JS)

@jdpaige

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (17)
error

Images must have alternate text

<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more
error

Images must have alternate text

<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more
error

Images must have alternate text

<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more
error

Images must have alternate text

<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more
error

Images must have alternate text

<img src="./images/icon-arrow-down.svg" class="arrow">
Learn more
warning

Document should have one main landmark

<html lang="en">
Learn more
error

<ul> and <ol> must only directly contain <li>, <script> or <template> elements

<ul class="questions">
Learn more
warning

All page content should be contained by landmarks

<img src="./images/illustration-box-desktop.svg" alt="" class="box">
Learn more
warning

All page content should be contained by landmarks

<img src="./images/bg-pattern-desktop.svg" alt="" class="bg-img-desktop">
Learn more
warning

All page content should be contained by landmarks

<img src="./images/illustration-woman-online-desktop.svg" alt="" class="woman-desktop">
Learn more
warning

All page content should be contained by landmarks

<h1>FAQ</h1>
Learn more
warning

All page content should be contained by landmarks

<label for="team-members" class="questions__label">
              <p>How many team members can I invite?</p>
              <img src="./images/icon-arrow-down.svg" class="arrow">
            </label>
Learn more
warning

All page content should be contained by landmarks

<label for="max-upload" class="questions__label">
              <p>What is the maximum file upload size?</p>
              <img src="./images/icon-arrow-down.svg" class="arrow"></label>
Learn more
warning

All page content should be contained by landmarks

<label for="password-reset" class="questions__label">
              <p>How do I reset my password?</p>
              <img src="./images/icon-arrow-down.svg" class="arrow">
            </label>
Learn more
warning

All page content should be contained by landmarks

<label for="subscription" class="questions__label">
              <p>Can I cancel my subscription?</p>
              <img src="./images/icon-arrow-down.svg" class="arrow">
            </label>
Learn more
warning

All page content should be contained by landmarks

<label for="support" class="questions__label">
              <p>Do you provide additional support?</p>
              <img src="./images/icon-arrow-down.svg" class="arrow">
            </label>
Learn more
warning

All page content should be contained by landmarks

<div class="attribution">
      Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
      Coded by <a href="#">Jaron Paige</a>.
    </div>
Learn more

Jaron Paige’s questions for the community

A big struggle (and one that I didn't come to a solution on) was how to position the images such that:

a) they were positioned with respect to the card b) they maintained position relative to each other c) they maintained position in a responsive way d) one of them had overflow and the others did not

Otherwise, fun project and it made me tackle making an accordion without using a framework or JS.

Community feedback

Ken 975

@kenreibman

Posted

Great job! You're so close to the final result, and I commend your hard work and effort :)

On the desktop layout for the left illustration section, this project requires multiple layers that act as a position: relative, in addition to uses of z-index, and the illustration ends up being an position: absolute that doesn't get hidden by the main card container.

It might be hard to see, but take a look at my code or any Youtube video that covers this solution.

Your viewport width at 375px has the card overflowing. Although I haven't checked your actual code, this is due to you setting fixed heights such as using the height and width property. I would recommend you using max-width for containers and min-height for your parent body elements to establish a height.

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!