Is there a way to display content only for the checked input while ensuring that only one input can be checked at a time? I am looking for a method to uncheck the previously checked input, so that only one input remains checked at any given time. Is it possible to achieve this functionality using only CSS and not JavaScript? Although I am familiar with how to do this in JavaScript, I would like to explore a CSS-only approach.
input {
display: none;
}
.content {
padding: 5px 0px;
margin: 0 0 1px 0;
border-radius: 3px;
color: hsl(240, 6%, 50%);
font-size: 14px;
overflow: hidden;
height: 0;
opacity: 0;
transition: height 0.4s, opacity 0.4s;
}
input:checked ~ .content {
height: 60px;
opacity: 1;
}
Check out the code on Github: https://github.com/rishipurwar1/faq-accordion-card-main