Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

FAQ Accordion with Vanilla HTML & CSS

sass/scss
kxnzx•870
@kxnzx
A solution to the FAQ accordion card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hello Mentee's,

This project was surprisingly fun, but also tricky!

I have spent quite some time on Googling which tag to use for the FAQ Accordion. After a considerable amount of time searching on the web, I found about the details and summary tags. These tags combined hide or open the answer of a question when the element is clicked on. JavaScript became unnecessary using these tags:

<details>
  <summary><b>How many team members can I invite?</b></summary>
  <p>
    You can invite up to 2 additional users on the Free plan. There is no limit
    on team members for the Premium plan.
  </p>
</details>

The tricky part of this challenge was the layering of the elements, especially the box for the desktop design. I have spend quite some time figuring out how to position the box on the specified spot. Position absolute on the box with position relative on the body did not seem to work, because the element moved inwards while resizing the window. I also placed the box inside the FAQ Card (parent of the other background-images which is set on hidden overflow). I was looking for a way to force the child element (the box) to appear visible outside of the hidden overflow container with a disable function. This however was impossible. The solution I found was to place back the box outside the main and wrap the box and the main in a container which is set to position relative.

 .container {
    width: 19.688rem;
    @media screen and (min-width: $desktop) {
      position: relative;
      width: 57.5rem;
    }

Feel free to leave suggestions.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on kxnzx's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.