Only checked one input at the time css

Question

I want to show content only for checked input and only one input can be checked at a time. I just want to know how to uncheck previously checked input so that only one input remain checked at a time. I want this functionality only using css not js. I know how to do this in js. This is my code for this.

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;
}

Github repo: https://github.com/rishipurwar1/faq-accordion-card-main

If you use radio it will automatically have your desired behavior — Aalexander, Dec 28 '20 at 09:06
@Alex After using radio button, I am not able to toggle the accordion item. It uncheck the previously selected input but it doesn't uncheck if I click on checked input to uncheck — r121, Dec 28 '20 at 09:08
use this link: https://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label — Ali Safari, Dec 28 '20 at 09:14

score 1 · Answer 1 · answered Dec 28 '20 at 09:08

1

use this way

<input type="radio" name="accor" id="ques-five">

https://jsfiddle.net/lalji1051/aob9mu2h/1/

answered Dec 28 '20 at 09:08

Lalji Tadhani

14,041
3
23
40

I don't able to toggle checked input to uncheck. – r121 Dec 28 '20 at 09:10
then use jQuery or plugin – Lalji Tadhani Dec 28 '20 at 09:11
so, i think I have to js – r121 Dec 28 '20 at 09:11
use radio button and give the same name all radio buttons. – Sato Takeru Dec 28 '20 at 09:13
and you can change the radio button style as checkbox – Sato Takeru Dec 28 '20 at 09:14
I'll try to implement it – r121 Dec 28 '20 at 09:37
@George what do you mean by "change the radio button style as checkbox"? – r121 Dec 28 '20 at 14:57
you can use image to change radio button looks like checkbox – Sato Takeru Dec 28 '20 at 15:06
see here. https://stackoverflow.com/questions/279421/can-you-style-an-html-radio-button-to-look-like-a-checkbox – Sato Takeru Dec 28 '20 at 15:10

score 1 · Answer 2 · answered Dec 28 '20 at 09:45

1

Try this

<input type="radio" id="" name="" value="">

answered Dec 28 '20 at 09:45

Talha usman

21
3

If i use radio button then I am not able to toggle checked input. – r121 Dec 28 '20 at 09:57
Then there may be some id issue. you should check your id name which should be same. hope so that will work for you. – Talha usman Dec 28 '20 at 10:06
this is my repo https://github.com/rishipurwar1/faq-accordion-card-main Could you please tell me where I am making mistake? – r121 Dec 28 '20 at 11:46

Only checked one input at the time css

2 Answers2