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

FAQ-Accordian Card

Vani•160
@VANIMEHTA
A solution to the FAQ accordion card challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


1)How do i merge the two images ie the box image and person image as shoen in the design file. 2)Im still struggling with java script so somebody pls help with the script code its not working:/.

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Yokke•620
    @Jexinte
    Posted about 3 years ago

    Hello ,

    Above all organize your files in separate folder it's more meaningful when we need to find something specific ( When I download your code I had to rewrite almost all img files path )

    There is a more simple way to do what is ask on the challenge by using <details> and <summary> tag that have the effect that you need to toggle a question and her answer without js ! ( Javascript is not a requirement to use I learn that by asking on the website slack)

    More informations here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

    Then on css you can specify what to do when a question is open by targeting the "open" attribute more details to here :

    https://css-tricks.com/put-a-background-on-open-details-elements/

    I'm just saying that but I think that If you are stuck on your code try to not check the code of others now just say where you're stuck and I think you'll get a better understanding and better answer on why it's not working ( This is how some people learned me ) .

    I forgot in your js code you're trying to show all answer with the [i] index but you haven't loop through them so they are gonna be always undefined ! You could know that just by using a console.log(ans[i]) !

    In hope it helps !

    Marked as helpful
  • subu•390
    @subu-v
    Posted about 3 years ago

    Regarding images, Use this property on the bigger image.

    transform:translateX(-values); 
    This will move the image on the left, tinker with the value untill you archeive the desired output.
    
    

    As for the box image, use absolute positioning on it and make your container(parent of all element) position:relative;

    position:absolute;
    top: some value;
    left: some value;
    transform:translate(-50%,-50%);
     //tinker with the values untill the desired outcome.
    

    To make the box to appear on top of the bigger image with the women. Use z-index property on the box image.

    z-index:-1;
    
    

    As for the functionality, please visit mygithub repository where i added the required functionality in 7 lines of code. https://github.com/subu-v/faq-accordian-component.git

    If you have any doubts, feel free to ask.

    Marked as helpful

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.

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