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

Question

我一直在尝试创建类似于谷歌图片的东西（当你点击一张图片时，它会“打开”一个带有信息和链接的大版本，当你再次点击它时它会关闭）。

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

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

只用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

到目前为止，我发现的最佳解决方案是使用收音机。您需要使用 1 个没有内容的额外输入，因此当您选择它时它不会显示。这样其他的就会关闭。

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

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

现在唯一的问题是关闭按钮在动画结束之前都是可见的，我已经尝试过解决它，但没有运气，不胜感激。

Answer 2

这是你想要的。请尝试下面的代码。`折叠/展开 折叠/展开 关闭

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