Responsive FAQ accordion card using flexbox and radio buttons.
Design comparison
Solution retrospective
Hi! This is my first challenge here! Was fun and I look forward to doing more. At the beginning I used anchor tag and :target selector to display tabs. I was satisfied with the result until the mobile preview (due to the site scroll) started jumping to the links, which I had not thought about. I used radio buttons instead, which seem to do be a better solution. Is this the best solution to display tabs without using javascript? And my another question is about positioning images. This is often a problem for me and I don't know if I do it right. Feedback appreciated, thanks!
Community feedback
- @ApplePieGiraffePosted about 4 years ago
Hey, tediko! 👋
Nice work! 👍
And congratulations upon completing your first Frontend Mentor challenge! 🎉
Your solution looks good and is responsive! I like the animation you added to the floating cube (I happened to do the same thing when I completed this challenge)! 😆
Using radio buttons to make the accordion isn't a bad idea (others use it and use checkboxes to do the same thing)! If you're interested, you can look into the HTML
<details>and<summary>elements, which can make creating an HTML and CSS-only accordion much easier! See this article for details.Your positioning of the images seems fine!
Keep coding (and happy coding, too)! 😁
1
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