Skip to content
Submitted over 3 years ago

Html & CSS only (no JS) : using the details html tag

Marauth•100
@sebastienpuigrenier
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I used "details" instead of JS for this challenge and I take somes liberties with margin and shadow-box.

Feel free to give me your feedback ;)

Community feedback

  • Alan Garcia•85
    @This-Is-AlanPosted over 3 years ago

    Hey Marauth this is amazing!

    I never would have used the html elements <details> or <summary>, your css is really well done.

    Where did you pick this all up? I'd love to hear about it!

    0
    Marauth•100
    @sebastienpuigrenierPosted over 3 years ago

    @This-Is-Alan There was a "Bonus" point in the brief that say we can do it without JS and currently I'm at the beginning of learning JS so my friend Google help me to find this solution with "details" and "summary" ;)

    0

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