Responsive FAQ's Accordion component using HTML, CSS & Javascript
Design comparison
Solution retrospective
Hello, FE-Mentor Crew !
I'm really new to the <details> and <summary> tags so I'd really appreciate any constructive feedback you may have on my solution.
Specifically in relation to the height change when a details section is opened, currently the .accordion-wrapper increases in height from the centre but id like the top of the .accordion-wrapper to stay in place and just extend in height / length from the bottom. Also any advice on how I could improve the illustration placement on desktop as well as hiding the overflow.
Looking forward to starting my next project this afternoon ! Happy <coding /> 💻
Community feedback
- @MtalafaPosted about 1 year ago
Hi Jacksen,
Well done for completing this challenge.
Your card extends from top and bottom because it is centered. So when the height changes it is added from both top and bottom to keep it centered.
I have not tried this, but I`m guessing you can use grid on your accordions to make sure they have the same height and then leave one of them open when the page loads in. This way your box will stay the same height when you open another one.
Marked as helpful1@jacksen30Posted about 1 year ago@Mtalafa Thank you so much ! Id got fixated on why is this element expanding from the middle, and not thought its just repositioning its self inside the parent to keep it centred with its new height. I'll fix this up tomorrow.
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