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

Pure CSS FAQ Accordion Card With Sweet CSS Animations

#accessibility#sass/scss
P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

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 (0)

Our reporter did not find any issues in this project! πŸŽ‰

ApplePieGiraffe’s questions for the community

Hey, everybody! πŸ‘‹

This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

I'm quite happy with the result! 😊

Any feedback on both the design and code is welcome and appreciated! πŸ˜ƒ

Happy coding! 😁

EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

Community feedback

dannxvcβ€’ 200

@dannxvc

Posted

Oh this so amazing!!! I truly love this, you are so creative. I think I would change the card's height as min-height, so then if all of your questions are opened, they could be seen and to make your cube-img look as good as it does now, you could position it by using top:40% and transform: translateY(50%), that would be sick. Amazing job as always!

Marked as helpful

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@dannxvc

Thank you for your suggestion! That's a nice idea! πŸ™‚ It is useful to be able to see all of the content of the accordion card without having to scroll!

I submitted this solution over a year ago, but for some reason I had set it to be a private solution for quite a while until yesterday! πŸ˜‚

Have a great day! β˜€οΈ

1

P
Karol Binkowskiβ€’ 1,590

@GrzywN

Posted

Great as always πŸ₯°

I prefer :target for CSS only approach, because it's easier to animate, but <summary> and <details> seems to work too.

Have a nice day 😁

Marked as helpful

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@GrzywN

Thank you for your suggestion!

Another reason I like to use the details and summary elements is that they are fairly accessible out-of-the-box. For instance, you can open/close each accordion with your keyboard, which is helpful for navigation.

That being said, I just realized I forgot to add focus styles to the accordions, anyway, so the keyboard navigation still has some work to do! πŸ˜…

I submitted this solution over a year ago, but for some reason I had set it to be a private solution for quite a while until yesterday! πŸ˜‚

Appreciate your help! Have a nice day, as well! β˜€οΈ

2

Tesla_Ambassadorβ€’ 2,900

@tesla-ambassador

Posted

@APG, this is a very great solution! I like the blobbing animation and I think I will make use of that gradient changing resource. It might have been a year ago but man am I so glad to see you submit a solution (It's like that feeling when a marvel movie drops 😁).

What library do you use for animations these days?

Marked as helpful

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@tesla-ambassador

Heyyyy, thanks, bro! You're too kind! πŸ˜„

My favorite thing to use for animations is GSAP, but for this challenge I just used CSS since the animations are quite simple. πŸ˜‰

Happy coding! 🌴

0

Vanza Setiaβ€’ 24,075

@vanzasetia

Posted

Hey, ApplePieGiraffe! πŸ‘‹

This is amazing! I love the animated background color! Awesome! 😍

Two things that I'd like to suggest.

  • First, I would recommend is to add :focus-visible styling to the summary element so that the keyboard users could see where they are currently on the page.
  • Second, I suggest removing all animations when the users prefer not to see them. You can add the following code to your stylesheet. I think this is a great code to include every time you create a new project (I get it from https://piccalil.li/blog/a-modern-css-reset/.
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Other than those two things, everything is looking good to me. πŸ‘

That's it! Happy coding! 😁

Marked as helpful

1


Vanza Setiaβ€’ 24,075

@vanzasetia

Posted

@ApplePieGiraffe I have several questions for you as well. πŸ™‚

1

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@vanzasetia

Hello, Vanza!

Thank you for your suggestions!

I actually submitted this solution over a year ago. At some point, I accidentally made this solution private, and only realized this and made it public again the other day. But because of the way the platform is set up, my solution is treated as if I just submitted it. That's why you'll see that many of the comments at the top of the page have been around for over a year, too! πŸ˜…

Since I was still very much a beginner back then, I didn't know about/forget to implement those suggestions. πŸ˜‰ Thank you for reminding me, though!

About changing the font-size to 50%β€”I did this back then because I liked to work in units of 8px (which is a common number to work with among some designers). I no longer do this anymore as I prefer to work with 16px, now. However, if I do change the font-size to a percentage other than 100, I like to make sure that I compensate for that adjustment by adding another style rule to adjust the font-size of the document to a readable value. That way, I can avoid the pitfalls that Josh Comeau pointed out with this method (there might still be an issue with 3rd-party packages, though). For some reason, I forgot to do that in this solution. πŸ™ƒ

I appreciate your help! Happy coding, too!

0

Vanza Setiaβ€’ 24,075

@vanzasetia

Posted

@ApplePieGiraffe

You're welcome! πŸ‘

I didn't notice the old comments. So, I thought that it was a new solution. πŸ˜†

I get it. It's good that you are aware that by changing the html font size, you need to do extra work to make sure everything will still be readable. πŸ˜‰

1

Jaydiβ€’ 355

@ruedasjnthn

Posted

I love the little animation on the side. It really inspires me. I will make your solution my reference in creating this challenge

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@ruedasjnthn

Thanks, ruedasjnthn! πŸ˜€ Good luck with your challenge! πŸ‘

2

Daniel Castroβ€’ 70

@danielscastro

Posted

Amazing job! I made sure to save it for future reference in case I need it xD. The way you made the box glue with the white content box was what me made go crazy when I tried this challenge, but I see your resolution works perfectly.

Keep coding, my friend!

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@GDanKas

Thanks for the kind words, GDanKas!

Happy coding to you, too! πŸ˜†

2

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

As always, a great job!

Thanks for sharing the link to the gradient animation tool - you always add such fun animations to your solutions! I like how you chose to animate the box even on the mobile layout.

The markers still show up in Firefox, but if you add list-style: none to your .faq-question, it should get rid of it! πŸ˜ƒ

The only thing I see that's missing are the active states for the questions (I believe they should be orange on hover). Other than that - you're golden! πŸ‘

3


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@brasspetals

Thanks for the feedback (and the reminders to style the detail markers in Firefox and add the active state to the questionsβ€”both of which I thought of at some point but eventually forgot)!

😁

EDIT: Issues fixed!

1

Hania B.β€’ 1,420

@techanthere

Posted

Hey @ApplePieGiraffe, I have also completed this challenge recently and just have a question in mind. I have read this somewhere but was not able to find it again. I know the use of accordion vs. tab, but can I compare an accordion with a tab design, thinking that the tab panel should be displayed only one at a time while in accordion design we should let all the content expandable at once? Or it is same for accordion as well? Please guide and btw your solution looks really good except that I have a problem with the FAQ heading also scrolling with the content and not visible πŸ˜€ Though I have also not been able to solve this once after I had have given enough time to code already, and it felt so difficult to redo it ;)

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@techanthere

Thank you, Hania!

Sorry for my late reply! πŸ˜…

I prefer to allow users to open multiple tabs at once so that they can see more information at a glance and also so that they don't get annoyed if an open tab closes when they didn't expect/want it to when they open a new tab. πŸ˜‰

2

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@techanthere

And haha, yes, I might need to go back and make sure that the heading of the accordion tab doesn't scroll with the rest of the card's content. πŸ˜…

Good luck with your solution! πŸ‘

2

P
Marcus Hugoβ€’ 275

@marcus-hugo

Posted

I've been reworking my solution and saw that yours has no javascript and that you used the details and summary elements, which I didn't know about!

I really like the animations on load too!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@marcus-hugo

Thanks so much, Marcus! 😊

The details and summary elements do make creating components like this much easier! πŸ˜…Glad you learned something new!

1

Aakash Vermaβ€’ 6,680

@skyv26

Posted

Hi! I've just completed this challenge, but I am not happy with my solution, I am learning React, so that's why I am trying to complete frontend challenges with React. Can you please help me watching my solution or code. I'll be happy and appreciate your feedback. Please check this one https://www.frontendmentor.io/solutions/responsive-faq-accordian-jWYw_7J1w

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@skyv26

Hey, there! πŸ‘‹

Very sorry for my very late reply! I just noticed the notification for this while scrolling through my email. πŸ˜…

It might be a little late, but I'll take a look at your solution now! πŸ˜‰

2

Akerele Tundeβ€’ 165

@trafiki

Posted

Hi @ApplePieGiraffe, I have one more question if you don't mind, how are you able to make the cube stay at the same position when resizing the window on desktop view? I have tried different techniques but they aren't working. What the secret? πŸ˜ͺ

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@trafiki

Try positioning the floating cube relative to the cardβ€”so make sure the floating cube is a descendant of the card in your HTML and then add position: absolute to it. You'll need to add position: relative to the card in order for this to work, as well. Then you can play around with the top and left properties on the floating cube to see what works (using fixed values for those properties will probably be best) for your project. πŸ˜‰

1

Akerele Tundeβ€’ 165

@trafiki

Posted

Thanks a lot!

2

Akerele Tundeβ€’ 165

@trafiki

Posted

Hi @ApplePieGiraffe great work! I was wondering, how did you tuck the image on the left under the body background while it's still inside the white container? I've tried inspecting your code but I didn't find anything. I'd appreciate some explanation or if it's a technique that I can look up please let me know. Thank you!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@trafiki

Hey, thanks, Akerele! πŸ˜€

The floating cube and the illustration are both <img> tags in the HTML. The floating cube is absolutely positioned and the illustration just has some negative margin to push it to the left of the card a bit (I think overflow: hidden is set on the card so that the illustration doesn't peek through the edges).

The background image behind the illustration is added with CSS background images. You can see it by going to article.card and looking at its styles in the dev tools. I think using CSS background images made adding and positioning that image a little easier (since background images are automatically clipped and you don't have to worry about them overflowing their container). If you’d like to learn more about CSS background images and how to use them, check out this tutorial from MDN.

Hope that helps. πŸ™‚

1

Artβ€’ 420

@Art-wdt

Posted

Hey @ApplePieGiraffe ! Always, you surprise me with the level of your skill. This is probably one of the best accordion challenges on this site. I will learn a lot from your example.

How about making it look great on a screen less than 310px wide? Maybe I'm wrong. Perhaps my question is stupid. Thanks anyway for your great example!

Happy coding!

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Art-wdt

Hey, Art! Thanks for the kind words! 😊

That's actually a good point you made about designing for screens with very small widths. πŸ‘ I used to only make things responsive for screens down to around 320px in width (which is what I did for this challenge), but now days I try to do a little extra and make things look good on screens down to around 280px instead (and that's probably what I would recommend). Thanks for pointing that out. We are always learning! πŸ˜€

Happy coding to you, too! πŸ˜„

2

Justin Voyeβ€’ 85

@JVoye

Posted

Really like this technique, great job!

Perhaps I could combine the html details technique and a simple toggle event to close the previous faq when clicking on a new one.

2

KamyaJainβ€’ 20

@KamyaJain

Posted

great design and animation is amazing must say! would like to include in my designs too for sure.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@KamyaJain

Thank you very much! 😊

0

SuperSet1607β€’ 280

@mohit1607

Posted

hi @ApplePieGiraffe your work with sass is amazing but I have one question in mind that how do you exactly have idea about the perfect size like mention design ? Cuz when I try I only declare the % of size of 100% of the font size and then use them as rem but kind of never achieving the same results as metion design. Please help I will appreciate.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@mohit1607

Thank you!

You should definitely set the font-size of the document to 100% and then use rem to size text throughout the site. If you don't have the design files, you'll just have to play around with the values a bit until you find something similar to the design JPGs. This browser extension named PerfectPixel allows you to overlay an image over your website so that you can see exactly how your site matches up with the design. I used to use it a lot and maybe it will help you, too! πŸ˜‰

1

SuperSet1607β€’ 280

@mohit1607

Posted

@ApplePieGiraffe Thank you very much, this is the only thing that I was missing. I am very glad and grateful that I asked you for help. Once again thanks.

1

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@mohit1607

No problem! Glad to help!

0

Dwightβ€’ 215

@SarsiPC

Posted

Woah, This is the best solution for this challenge so far! Love the box animation & how you are able to scroll within the box.

Amazing, my friend! Just one more thing... fix the background :D

2


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@SarsiPC

Hey, thanks for the feedback! 😊

I actually chose to have a different background than the design because I wanted the background to be animated. If you look closely, you should be able to see the color of the background gradually fade between blue and purple. 😁

3

Dwightβ€’ 215

@SarsiPC

Posted

@ApplePieGiraffe That's crazy! Good work!

3

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!