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

Простая версия контента переключения только с HTML и CSS.Атрибут :checked 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';
}

<p>I am fine and <input type="checkbox" id="show-more"> <span>how are you?</span><label for="show-more"> details</label></p>

Answer 2

Решение 1) Использование jQuery

Visit below link for `Read More` example.

Загрузка Jquery Еще пример

Решение 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>