Submitted about 2 years ago

FAQ Accordion Card

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

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

Community feedback

Adarsh• 1,560

@adram3l3ch

Posted about 2 years ago

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

Julian Florez• 190

@juliflorezg

Posted about 2 years ago

@adram3l3ch while this can be done with plain HTML + CSS as you say, the main purpose of this challenge is to create the accordion behavior with JS and DOM manipulation.

Adarsh• 1,560

@adram3l3ch

Posted about 2 years ago

@juliflorezg Go to the challenge info and read the bonus tip :)

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted about 2 years ago

@adram3l3ch I will take a look, thanks

Alazar Getachew• 260

@AlazarG19

Posted about 2 years ago

nice solution it just need some slight adjustment like the shadow

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted about 2 years ago

@AlazarG19 Thanks for the feedback

Darrick Fauvel• 340

@DarrickFauvel

Posted about 2 years ago

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. 😊

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted about 2 years ago

@DarrickFauvel I will give it a try, thank you

Kasra Tabrizi• 300

@KasraTabrizi

Posted about 2 years ago

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!

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted about 2 years ago

@KasraTabrizi I will take a look, thanks!

Hamza Abdirashid• 100

@hamzaabde

Posted about 2 years ago

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.

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted about 2 years ago

@hamzaabde Thank you for the feedback. I know how to work with Tailwind, however, I like the good old CSS more, especially for projects which I am using to master CSS.

Josh• 110

@JoshMooner

Posted about 2 years ago

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.

Stanhope Jite• 90

@JyteCeo

Posted about 2 years ago

@JoshMooner I'd like to see your code and help you with media queries to the best of my ability . reach out at [email protected]

👾 Ekaterine Mitagvaria 👾• 7,640

@catherineisonline

Posted about 2 years ago

@JoshMooner I usually use Chrome. You need to right-click and choose to inspect. It will show you developer tools and on top, you can choose the screen size - either type manually or choose the templates for devices. There are also different apps and extensions but I never really use any. Also, I try to test on my phones - Android and iPhone. Media query has its difficulties but you need to grasp the basics. For instance, if you make the design for desktop first, you need to use media query by going down in size, to say so. For example, if you created a desktop design you need to change something for a smaller size right? Let's say your computer width is 1440px and you want to change some container instead of horizontal (flex-direction: row) change to vertical (flex-direction: column). In the media query, you will indicate @media screen and (max-width: 1025px), for example, and change the flex-direction to the column. It is telling the browser is that when the screen will be less than 1025px change this and that. So make my flex-direction column when the screen size is a maximum of 1025px. If it will get more it means it will change back to the original. Then let's say you want this flex container to disappear when the screen size is 800px. You will write @media screen and (max-width: 800px), for example, and inside write display: none. It means that when the screen is 800px or less make my container disappear.

To go through it again - your screen width is 1440px and you write that some flex container direction is row. Then when the screen is 1025px or less the flex-direction changes to the column. Then, when the screen is 800px or less this container disappears.

And by using inspect(dev tools) in Chrome you can change the size of the screen to check what it will look like actually.

This is like the very basics, not sure what level you are at. It also works differently if you are starting with mobile design first.

Please log in to post a comment

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