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

Question

for the testing purposes, I was working on a solution which will allow me to show & hide specific div (id based) using only one button.出于测试目的，我正在研究一种解决方案，它允许我仅使用一个按钮来显示和隐藏特定的 div（基于 id）。

The jsifddle is here: link to code jsifddle 在这里：链接到代码

the code looks like that:代码看起来像这样：

CSS 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 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>

Correct me if i'm wrong, but probably it's impossible to achieve it without jquery & using one button?如果我错了，请纠正我，但如果没有 jquery 和使用一个按钮，可能无法实现它？ because of a single anchor?因为一个锚点？

Answer 1

This could help这可能有帮助

 .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

This is one way it can be done with HTML and CSS only.这是仅使用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>

Please let me know if this helps.请让我知道这可不可以帮你。

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

问题描述

2 个解决方案

解决方案1
9 已采纳 2019-11-29 07:27:48

解决方案2
2 2019-11-29 08:15:35

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

问题描述

2 个解决方案

解决方案1 9 已采纳 2019-11-29 07:27:48

解决方案2 2 2019-11-29 08:15:35

解决方案1
9 已采纳 2019-11-29 07:27:48

解决方案2
2 2019-11-29 08:15:35