Design comparison
Solution retrospective
This project for me was pretty disheartening...mainly because I had to repeat it many times to get it to be even decent. Although I don't think it's super awesome, the JavaScript part wasn't that much of an issue as I repeated many sample projects to get a grasp on the logic behind making an accordion. The main issue that I had was dealing with the (what I perceive to be) inside padding inside of the design as well as the z-index part which I could never fully grasp. I attempted to put a z-index on the body but learned that z-index can't be applied to a body because the default positioning is static. I decided to turn in what I have because I didn't want to mess it up any further than I did but I do plan on going back through this project again and creating something better. I would love feedback on this one especially. Thank you all for reading and helping me get this far!
Community feedback
- @RJ3605Posted almost 2 years ago
Hi Michael,
If you're interested in an HTML based solution, I highly recommend the <details> and <summary> tags. You can check that out at the following link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details. That's what I used when I worked on this project. It was eye opening for me to find out how to do it without any JavaScript. You're more than welcome to look at my project for a live example. You can see my solution here: https://www.frontendmentor.io/solutions/faqaccordioncard-y4MQ1741Ww
A quick note, you will have to hide some of the default styling (there are arrows on the left by default), but that is fixed with the CSS 'list-style: none; '.
If you'd like further clarification please feel free to reach out!
Marked as helpful0@mikej321Posted almost 2 years ago@RJ3605 Thanks so much! I just checked the mdn on details and summary and WOW! I am going to go through this entire project again and try to use those tags to achieve the design. Thanks for guiding me in the right direction!
1@RJ3605Posted almost 2 years ago@mikej321 You're very welcome! Glad I could help. Happy Coding!
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