Pure CSS FAQ Accordion Card With Sweet CSS Animations

@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! ☀️

@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! ☀️

@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! 🌴

@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 @use and @forward).
• Why are you changing the html font size to 50%? Usually, people would change the html font size to 62.5% to make it easier to calculate rem values to px values. Also, I read this article by Josh Comeau tells about the problem of the 62.5% trick (or changing html font size in general).

@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!

@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. 😉

@ruedasjnthn

Thanks, ruedasjnthn! 😀 Good luck with your challenge! 👍

@GDanKas

Thanks for the kind words, GDanKas!

Happy coding to you, too! 😆

@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!

@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. 😉

@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! 👍

@marcus-hugo

Thanks so much, Marcus! 😊

The details and summary elements do make creating components like this much easier! 😅Glad you learned something new!

@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! 😉

@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. 😉

@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. 🙂

@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! 😄

@KamyaJain

Thank you very much! 😊

@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! 😉

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

@mohit1607

No problem! Glad to help!

@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. 😁

@ApplePieGiraffe That's crazy! Good work!