Skip to content
Submitted 6 months ago

FAQ Accordion - Transitioning Heights with CSS and JS

Keith•190
@KeithEsc
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

By using this article by Keith Grant I was able to learn about a technique to transition from different height values. I will continue to work on Javascript so that next time I am able to initiate the EventListener without needing to seek out the solution for it.

What challenges did you encounter, and how did you overcome them?

Placing the SVG in the background was a struggle. Could not quite figure out how to properly place the image and maintain the position and size of the SVG. Had to seek help on setting up the EventListener.

What specific areas of your project would you like help with?

If anyone knows a better way of placing the SVG in the background please let me know because I spent way too much time trying to get this right and had to settle with what I have.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    hi KeithEsc

    Try navigating using a keyboard only and make selections to see if it works. It is important to use semantic elements always - EventListeners are meant to be used with interactive elements such as buttons and input elements. An icon/image should not be used as an interactive element as that will require a lot of additional code and secondly it will cause confusion to assistive technology.

    • expanding the content is causing the content to be cut off on top . Remove the height: 100% on the .wrapper div
    Marked as helpful

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