Skip to content
Submitted almost 3 years ago

Pure CSS FAQ Accordion Card With Sweet CSS Animations

accessibility, sass/scss
ApplePieGiraffe•30,525
@ApplePieGiraffe
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • dannxvc•180
    @dannxvc

    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
  • Karol Binkowski•1,620
    @GrzywN

    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
  • Tesla_Ambassador•3,070
    @tesla-ambassador

    @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
  • Vanza Setia•27,715
    @vanzasetia

    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
  • Jaydi•355
    @ruedasjnthn

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

  • Daniel Castro•70
    @danielscastro

    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!

  • Anna Leigh•5,135
    @brasspetals

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

  • Hania B.•1,280
    @techanthere

    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 ;)

  • Marcus Hugo•365
    @marcus-hugo

    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!

  • Aakash Verma•9,500
    @skyv26

    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

  • Akerele Tunde•165
    @trafiki

    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? 😪

  • Akerele Tunde•165
    @trafiki

    Thanks a lot!

  • Akerele Tunde•165
    @trafiki

    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!

  • Art•420
    @Art-wdt

    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!

  • Justin Voye•85
    @JVoye

    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.

  • KamyaJain•20
    @KamyaJain

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

  • SuperSet1607•310
    @mohit1607

    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.

  • Akerele Tunde•165
    @trafiki

    Thanks!

  • Dwight•215
    @SarsiPC

    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

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