带有更多文本的HTML详细信息标签将打开

Question

我知道细节是如何工作的，就像这样：

<details>Hello World<summary>summary</summary>lost</details>
<details>another<summary>good night moon</summary>find me</details>

实际上，它在下一行中显示了一个详细信息按钮。

但是我想要一些可以使句子继续延伸的文本。 喜欢：

I am fine and [More details]

如果我单击[更多详细信息]，那么它将打开并用"what about you?"来完成整句话。

Answer 1

解决方案1）使用jQuery

Visit below link for `Read More` example.

Jquery Load More example

解决方案2）仅使用HTML和CSS

body {
  font: 14px verdana;
}

.content {
  overflow: hidden;
  height: 3.6em;
  line-height: 1.2em;
  width: 200px;
}

#show_more {
  display: none;
}

#show_more:checked + .content {
  height: auto;
}
.show_more_btn {
  cursor: pointer;
  color: blue;
}
.show_more_btn:after {
  content: "Show More";
}
#show_more:checked + .content + .show_more_btn:after {
  content: "Less";
}

<div>
  <input id="show_more" type="checkbox">
  <div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <label for="show_more" class="show_more_btn"></label>
</div>

Answer 2

仅包含HTML和CSS的简单切换内容版本。 :checked的{​​{1}}属性是显示/隐藏内容之间的系统切换。

input[type=checkbox]

input[type=checkbox] {
  display: none;
}

span {
  visibility: hidden;
}

input[type=checkbox]:checked ~ span {
  visibility: visible;
}

label {
  display: block;
}

label:before {
  content: 'More';
}

input[type=checkbox]:checked ~ label:before {
  content: 'Less';
}