Pure CSS FAQ Accordion Card With Sweet CSS Animations
Design comparison
Solution retrospective
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
- @dannxvcPosted over 2 years ago
Oh this so amazing!!! I truly love this, you are so creative. I think I would change the card's
heightasmin-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 usingtop:40%andtransform: translateY(50%), that would be sick. Amazing job as always!Marked as helpful2@ApplePieGiraffePosted over 2 years ago@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 - @GrzywNPosted over 2 years ago
Great as always 🥰
I prefer
:targetfor CSS only approach, because it's easier to animate, but<summary>and<details>seems to work too.Have a nice day 😁
Marked as helpful2@ApplePieGiraffePosted over 2 years ago@GrzywN
Thank you for your suggestion!
Another reason I like to use the
detailsandsummaryelements 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-ambassadorPosted over 2 years ago
@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 helpful1@ApplePieGiraffePosted over 2 years ago@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 - @vanzasetiaPosted over 2 years ago
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-visiblestyling to thesummaryelement 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 helpful1@vanzasetiaPosted over 2 years ago@ApplePieGiraffe I have several questions for you as well. 🙂
- Are you using the Live Sass Compiler extension to compile the Sass code to CSS code? If so then I think it would be better to install the Sass package from NPM because it uses Dart Sass which supports all the newest features of Sass (like
@useand@forward). - Why are you changing the
htmlfont size to50%? Usually, people would change thehtmlfont size to62.5%to make it easier to calculateremvalues topxvalues. Also, I read this article by Josh Comeau tells about the problem of the 62.5% trick (or changinghtmlfont size in general).
1@ApplePieGiraffePosted over 2 years ago@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 of8px(which is a common number to work with among some designers). I no longer do this anymore as I prefer to work with16px, 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@vanzasetiaPosted over 2 years ago@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
htmlfont size, you need to do extra work to make sure everything will still be readable. 😉1 - First, I would recommend is to add
- @ruedasjnthnPosted over 3 years ago
I love the little animation on the side. It really inspires me. I will make your solution my reference in creating this challenge
3@ApplePieGiraffePosted over 3 years ago@ruedasjnthn
Thanks, ruedasjnthn! 😀 Good luck with your challenge! 👍
2 - @danielscastroPosted about 4 years ago
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@ApplePieGiraffePosted about 4 years ago@GDanKas
Thanks for the kind words, GDanKas!
Happy coding to you, too! 😆
2 - @brasspetalsPosted about 4 years ago
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: noneto 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@ApplePieGiraffePosted about 4 years ago@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 - @techantherePosted almost 3 years ago
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@ApplePieGiraffePosted almost 3 years ago@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@ApplePieGiraffePosted almost 3 years ago@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 - @marcus-hugoPosted almost 3 years ago
I've been reworking my solution and saw that yours has no javascript and that you used the
detailsandsummaryelements, which I didn't know about!I really like the animations on load too!
2@ApplePieGiraffePosted almost 3 years ago@marcus-hugo
Thanks so much, Marcus! 😊
The
detailsandsummaryelements do make creating components like this much easier! 😅Glad you learned something new!1 - @skyv26Posted about 3 years ago
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@ApplePieGiraffePosted almost 3 years ago@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 - @trafikiPosted over 3 years ago
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@ApplePieGiraffePosted over 3 years ago@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: absoluteto it. You'll need to addposition: relativeto the card in order for this to work, as well. Then you can play around with thetopandleftproperties on the floating cube to see what works (using fixed values for those properties will probably be best) for your project. 😉1 - @trafikiPosted over 3 years ago
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@ApplePieGiraffePosted over 3 years ago@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 thinkoverflow: hiddenis 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.cardand 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-wdtPosted over 3 years ago
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@ApplePieGiraffePosted over 3 years ago@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 - @JVoyePosted about 4 years ago
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 - @KamyaJainPosted over 2 years ago
great design and animation is amazing must say! would like to include in my designs too for sure.
1 - @mohit1607Posted over 2 years ago
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@ApplePieGiraffePosted over 2 years ago@mohit1607
Thank you!
You should definitely set the font-size of the document to
100%and then useremto 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@mohit1607Posted over 2 years ago@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 - @SarsiPCPosted about 4 years ago
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@ApplePieGiraffePosted about 4 years ago@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
Please log in to post a comment
Log in with GitHub
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