All comments

• 

  P

  ApplePieGiraffe• 30,545

  @ApplePieGiraffe

  Submitted almost 2 years ago

  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.

  

  Pure CSS FAQ Accordion Card With Sweet CSS Animations

  #accessibility#sass/scss

  19

  82

  37

  

  Justin Voye• 85

  @JVoye

  Posted over 3 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