Uncheck checkboxes in html and css only? - html

Question

I've been trying to create something similar to google images (when you click on an image it 'opens' a larger version with information and links and when you click again it closes).
My task (school) is to realise this with only pure html(5) and css(3), so no javascript or JQuery or any other programming language.
I already tried using checkboxes and radio. When I use checkboxes, it will expand an 'informationbox' which will not close when I open the next one. There only needs to be one open at a time.
Therefore I also tried using radio. The problem here is that I'm not able to deselect them.
Is it possible to realise this with only html and css?
Is there anyone who can help me?
Thanks in advance!
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<div class="content">
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
<aside class="folder">
<input type="checkbox" name="xinfo" class="toggle" id="toggle3"/>
</aside>
</div>

Answer 1

The best solution I found till now is to use radio. You need to use 1 extra input that has no content, so it will not show when you select it. This way the other ones will close.
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
</aside>
JSFiddle example:
https://jsfiddle.net/zv1pd6wn/
The only problem now is that the close button will be visible till the end of the animation, I already tried to solve it, but no luck, help is appreciated.

Answer 2

Is this you want. kindly try below code.
<label for="toggle1" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle2" class="toggle-label">FOLD/UNFOLD</label>
<label for="toggle3" class="toggle-label">CLOSE</label>
<input type="radio" name="xinfo" class="toggle" id="toggle3"/>
<div class="content">
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle1"/>
<div class="fold">Element 1</div>
</aside>
<aside class="folder">
<input type="radio" name="xinfo" class="toggle" id="toggle2"/>
<div class="fold">Element 2</div>
</aside>
</div>
--css---
.folder {
width: 100%;
visibility: hidden;
}
.fold {
visibility: hidden;
background-color: #8b0000;
width: 60%;
height: 0px;
color: transparent;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
position: absolute;
}
.toggle { display: none; }
.toggle-label {
display: inline-block;
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
font-size: 11px;
color: #999;
background-color: #8b0000;
padding: 5px;
}
.toggle-label:hover {
background-color: #400000;
}
.toggle:checked ~ .fold {
height: 80px;
visibility: visible;
color: #fff;
}
.content{
width: 100%;
min-height: 0;
position: static;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.toggle:checked ~ .content {
min-height: 80px;
}
#toggle3:checked + .content .fold
{
visibility: hidden;
}