Accordion card using just CSS

@B1N4R1 I've thought about the closing option, but I couldn't find a solution using just css. Dou you have any ideia how this could be done? Thanks a lot.

@Jhemili You could convert your <div class="container"> to <a href="#" class="container"> then in the css you reset the anchor tags default styles like:

a{
   color: inherit;
   text-decoration: none;
}

So every time you click at the card the questions will close because the url of the site will change from #questionN to #, same will happen if you click on the opened question because the questions are children of the card so you are actually clicking the card too

Edit: This can vary, you could put the anchor tag as the wrapper of all the layout and instead of using the body to center everything use the achor tag

Cheers!

@B1N4R1 this is not a reason to use an anchor tag

@ChamuMutezva You are absolutely right, I was just suggesting a way to do it just using CSS and this is a little "trick" or "hack" you can use. If it was me I would have used JS like I did in my solution to this challenge

Maybe there is another way to do it with CSS that I missed?

@B1N4R1 , an easy way will be to use the details - summary element.

@ChamuMutezva You just revealed the world to me, didn't know about this element. You can do so much with it! Thanks!

@ChamuMutezva Thanks a lot for the help. I just posted the second version. I fixed some layout problems, and used your suggestion about details and summary. The code is now more organized and responsive, hope you guys agree.