仅取消选中 html 和 css 中的复选框？

Question

我一直在尝试创建类似于 google 图片的内容（当您点击一张图片时，它 'opens' 是一个带有信息和链接的放大版本，当您再次点击时它会关闭）。

我的任务（学校）是只用纯 html(5) 和 css(3) 来实现这一点，所以没有 javascript 或 JQuery 或任何其他编程语言。

我已经尝试过使用复选框和单选按钮。当我使用复选框时，它会展开一个 'informationbox'，当我打开下一个时它不会关闭。一次只需要打开一个。因此我也尝试使用收音机。这里的问题是我无法取消选择它们。

只用html和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;
}

<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

这是你想要的吗。请尝试以下代码。

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

Answer 2

到目前为止，我找到的最佳解决方案是使用无线电。您需要使用 1 个没有内容的额外输入，因此当您 select 它时它不会显示。这样其他的就关闭了。

<aside class="folder">
  <input type="radio" name="xinfo" class="toggle" id="toggle3"/>
</aside>

JSFiddle 示例： https://jsfiddle.net/zv1pd6wn/

现在唯一的问题是关闭按钮会一直显示到动画结束，我已经尝试解决了，但没有成功，感谢帮助。

仅取消选中 html 和 css 中的复选框？

Uncheck checkboxes in html and css only?

html

css

checkbox

image

radio