Skip to content
Submitted about 3 years ago

FAQ Accordion Card

👾 Ekaterine Mitagvaria 👾•7,860
@catherineisonline
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, Frontend Mentor community! This is my solution to the FAQ Accordion Card.

I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

Thank you

Code

Please log in to post a comment

Log in

Community feedback

  • Adarsh•1,640
    @adram3l3ch

    HI Catherine congratulations for finishing the challenge, you did a great job. I recommend the details tag for creating these kind of accordions. It is easier with the HTML elements "details" and "summary". In this way you can quickly create a perfomant and accessible accordion. CSS is only needed to create the accordion elements.

    You can refer about the details tag here

  • Alazar Getachew•260
    @AlazarG19

    nice solution it just need some slight adjustment like the shadow

  • P
    Darrick Fauvel•490
    @DarrickFauvel

    Hi @catherineisonline, 👋

    Nice job! 🎉

    What helped me with the image positioning was using containing elements with background images. Here is an html example of my containing elements:

    <div class="card">
    <div class="card__image"> 
        <div class="card__image-main"></div>
        <div class="card__image-main-shadow"></div>
        <div class="card__image-box"></div>
    </div>

    <div class="accordion-container-here"></div>
</div>

    Feel free to look at my solution to see more. I spent so much time on it to get it as close to the design as I could. 🤯

    You might also want to put a transition on your accordion. I did that as well.

    I hope this is helpful. 😊

  • Kasra Tabrizi•300
    @KasraTabrizi

    I was also having issues positioning the images in desktop mode, so you are not the only one lol. Especially with the small box and the pattern image.

    But it looks good otherwise!

  • Hamza Abdirashid•100
    @hamzaabde

    Again nice job.

    You might consider using the summary and details tags for less overhead. Also the design is a bit off, like the images lack the shadow and gradient is not quite similar to that of the design.

    Other than that, everything else looks tidy. To speed up your styling process you might consider using tailwind as it will make dealing with css a breeze, although it has to be learned but after that, the developer experience is nothing to be matched. Also another piece of advice would be to avoid jquery as much as possible right now, because everyone seems to dislike nowadays.

  • Josh•110
    @JoshMooner

    Excelent job! I've been watching your another solutions and you're improving and doing better and better. How do you build the mobile view and the responsive design? Do you use media queries or flex box? I don't know how to make the responsive design in my challenges, I mean, I code using media queries but it seem that doesn't work because when I visite the site on my phone the page looks break. Personally I don't have any to correct in your solution. I give you a 10/10.

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