The following code use a script to toggle/uncheck a radio when clicked a second time on the same.
My question is how do I do this using CSS only?
(function(lastimg) {
document.querySelector("#img-select").addEventListener('click', function(e){
if (e.target.tagName.toLowerCase() == 'input') {
if (lastimg == e.target) {
e.target.checked = false;
lastimg = null;
} else {
lastimg = e.target;
}
}
});
}());.container {
display: flex;
flex-wrap: wrap;
max-width: 660px;
}
.container > label {
flex: 1;
flex-basis: 33.333%;
}
.container > div {
flex: 1;
flex-basis: 100%;
}
.container label img {
display: block;
margin: 0 auto;
}
.container input, .container input ~ div {
display: none;
padding: 10px;
}
.container #img1:checked ~ #img1txt,
.container #img2:checked ~ #img2txt,
.container #img3:checked ~ #img3txt,
.container #img4:checked ~ #img4txt {
display: block;
}<div id="img-select" class="container">
<input id="img1" type="radio" name="img-descr">
<input id="img2" type="radio" name="img-descr">
<input id="img3" type="radio" name="img-descr">
<label for="img1">
<img src="http://lorempixel.com/200/200/food/1/" alt="">
</label>
<label for="img2">
<img src="http://lorempixel.com/200/200/food/6/" alt="">
</label>
<label for="img3">
<img src="http://lorempixel.com/200/200/food/8/" alt="">
</label>
<div id="img1txt">
<div>Recipe nr 1</div>
</div>
<div id="img2txt">
<div>Recipe nr 2</div>
</div>
<div id="img3txt">
<div>Recipe nr 3</div>
</div>
</div>Edit
I need a cross browser solution, working on the major browsers, and without script, just CSS.
To clarify, I want it to work as a normal radio input, but if clicked twice, or repeatedly, on the same, it should toggle itself as a checkbox input does.
Also markup change are allowed, as long as the layout structure is kept the same, and I would also prefer if it can break line, as a page can have more than 3 recipes.
Edit 2
The main focus of the question is how to make a radio input togglable, though since a couple of answers show other ways to toggle a state with pure CSS, any such tricks is welcome.