Uncheck checkboxes in html and css only?

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>