@RJ3605
Posted
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 helpful
@mikej321
Posted
@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!
@RJ3605
Posted
@mikej321 You're very welcome! Glad I could help. Happy Coding!