单个按钮到 show/hide 元素与纯 CSS

Question

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

jsifddle 在这里： link to code

代码看起来像这样：

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>

Answer 2

这是一种仅可通过 HTML 和 CSS 完成的方法。

body {
  font-family: sans-serif;
}
.accordion {
  position: relative;
}
.accordion .accordion-content {
  display: none;
}
.accordion input[type="checkbox"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}
.accordion .toggle-btn {
  color: #FFF;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 4px;
  display: inline-block;
  background-color: #000;
}
.accordion input[type="checkbox"]:checked ~ .accordion-content {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <div class="accordion">
    <input type="checkbox" id="toggle" name="toggle">
    <label class="toggle-btn" for="toggle">Toggle</label>
    <p class="accordion-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</body>
</html>

如果有帮助，请告诉我。

单个按钮到 show/hide 元素与纯 CSS

Single button to show/hide element with pure CSS

html

css

anchor

toggle

show-hide