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

Question

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

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

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

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

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

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

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

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