Design comparison
Solution retrospective
Hello o/ This is my attempt for the FAQ challenge, I managed to complete it without using Javascript, but I couldn't create a reverse animation for the dropdown using only CSS (I used checkbox and label), if there is a way to do this using only CSS I would be glad to know :D
Community feedback
- @dwhensonPosted over 3 years ago
Hi @laura-2035 - Great work on this one! π
Your solution looks great!! But I'm a bit confused - I was looking forward to seeing how you managed this without JavaScript, but it seems the page requires JavaScript to work? Sorry if I'm missing something here? When I disable JS nothing loads...
Just a point on your HTML, you might like to consider using the
details
andsummary
tags rather than acheckbox
inside adiv
for the questions and answers. I think this would be more semantic, and possibly easier to style.I also can't tab through any of the interactive elements on the page, which would be nice to be able to do.
For animations on the opening and closing without JS, you can do something like:
details[open] summary ~ * { animation: sweep 0.2s ease-out; will-change: opacity, transform; } @keyframes sweep { 0% { opacity: 0; transform: translateY(-1em); } 100% { opacity: 1; transform: translateY(0); } }
You could replace
details[open] summary
withinput:checked ~ label
if you wanted to keep to your current HTML structure, but I'm not 100% sure about the accessibility of that, and the details/summary approach is definitely semantically better.Hope this helps - as I said your solution looks great so this is really some 'behind the scenes' stuff to think about.
Cheers π and great work on this one!
2 - @matiussiPosted over 3 years ago
Hello @dwhenson o/ Thanks for the feedback!!!
I forgot to mention that I generated the FAQ list using JS (just to test the map() in .jsx files) π
I never heard about the
summary
anddetails
tags before, it's way better than using label and checkbox, and easier to style as you mentioned.I also appreciate the opening animation!! Now the FAQ seems more visually appealing!
Have a wonderful day πππ
1@dwhensonPosted over 3 years ago@laura-2035 great! Glad it helped. I havenβt learnt any jsx stuff yet. Slightly afraid to be honest but Iβll get there.... cheers!
1
Please log in to post a comment
Log in with GitHubJoin 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