Skip to content
Submitted over 4 years ago

faq accordion using HTML, CSS and JavaScript

Anjali M•50
@aj-menon
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, I have updated my solution to a responsive page and this is my very first attempt in building a responsive page. Please share your comments/feedback.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    Hi,

    I'm afraid this looks broken on mobile. The white card goes off the edges of the screen and the picture is cut off at the top.

    I'm really confused why you've used javascript for this tbh? Details summary doesn't require any js and you can target everything you need in css with pseudo states https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#customizing_the_disclosure_widget

  • Roc Tanweer•2,500
    @RocTanweer

    Hi Anjali I love how you used those details and summary tags. It's rare to see something like that, to me atleast. Instead of using div as a container, use a semantic HTML tag like section or main. Also your way of coding in Js is also unique.By the way, I think you want to know how to get the element on which a user clicks. 'event.target' will give you that.

    Hope it helps (Happy coding from India!!)

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