Submitted 3 months ago

FAQ accordion

aurelien•100

@pichade

Preview site View code

This is a solution for...FAQ accordion

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I challenged myself to build the entire feature using only CSS with the and tags. It was a bit tricky, but I managed to make it work, thanks to the insights I found in Gustavo Alexandrino's post. His guide was instrumental in helping me fully animate the elements without relying on JavaScript.

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

The main challenge was understanding how the CSS attribute selector works and how to apply it in a real-life scenario. After some reading and experimenting, I finally figured out how to make everything work.

Community feedback

Alex•3,130
@Alex-Archer-IPosted 3 months ago
When I read about building without JS, my first thought was - details and summary. I looked, and yes, it's details and summary! Very cool! I've wanted to try it sometimes, but somehow I thought that it's impossible to animate them =)

Why did you put content paragraph aside from summary? As far as I know you can put inside the details. Oh, and also you can make the lines between them with border-bottom and than you doesn't have to create additional divs =)
Marked as helpful
0
aurelien•100
@pichadePosted 3 months ago
The div is there to play with the min-height for the animation, It’s based on the post I linked in the question. And to be honest, I didn’t really try putting the content directly inside the <details> tags 😅.

As for the border-bottom, I initially applied it to the div, but it was hidden when the details element was closed, so I went with this less optimal solution. In hindsight, I probably should have applied the border to the <details> tag instead.
1
Alex•3,130
@Alex-Archer-IPosted 3 months ago
@pichade

Oh, I see now! You applied max-height to the open content. Well, this approach has one con - if text will change with time it could became lager than hardcoded height.

And another couple of things =) The image here are way more looks like the background than in previous work 😅 Also you duplicated @media(min-width:450px) two times.

But anyway it's a very cool experience!
Marked as helpful
0

Please log in to post a comment

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