使用纯 CSS 显示/隐藏元素的单个按钮

Question

出于测试目的，我正在研究一种解决方案，该解决方案允许我仅使用一个按钮来显示和隐藏特定的 div（基于 id）。

jsifddle 在这里： 链接到代码

代码如下所示：

CSS

body {
  font-family:'Trebuchet MS', sans-serif;
  font-size:0.5em;
  text-align:center;
}

.container {
  padding:1em;
  margin:0 auto;
  background:#efefef;
}

#added-value-1 {
  display:none;
}

#added-value-1:target {
  display:block;
}

#expand-btn-1 {
  margin:2em auto;
  text-align:center;
  padding:1em 2em;
  font-weight:bold;
  background:orange;
  display:inline-block;
}

HTML

<div class="container">
<h1>
Container for testing purposes. Below content will show/hide upon button click
</h1>
<p id="added-value-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin ullamcorper gravida odio et vulputate. Quisque eleifend finibus ante, tincidunt varius nibh tristique id. In suscipit sit amet leo non vulputate. Maecenas eu tellus maximus, hendrerit augue ac, consectetur tortor. Vestibulum fringilla sapien sit amet commodo ullamcorper.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus maximus mattis. Nam id gravida lorem, ac egestas nunc. Proin ullamcorper gravida odio et vulputate. Quisque eleifend finibus ante, tincidunt varius nibh tristique id. In suscipit sit amet leo non vulputate. Maecenas eu tellus maximus, hendrerit augue ac, consectetur tortor. Vestibulum fringilla sapien sit amet commodo ullamcorper.
</p>
</div>

<a href="#added-value-1" id="expand-btn-1" title="Expand">Expand</a>

如果我错了，请纠正我，但如果没有 jquery 和使用一个按钮，可能无法实现它？因为一个锚？

Answer 1

这可以帮助

.details,
.show,
.hide:target {
  display: none;
}
.hide:target + .show,
.hide:target ~ .details {
  display: block;
}

<div>
  <a id="hide1" href="#hide1" class="hide">+ Expand</a>
  <a id="show1" href="#show1" class="show">- Expand</a>
  <div class="details">
    Content goes here.
  </div>
  
</div>