通常需要在页面上放置任何单词，短语或段落的提示或附加信息。
以明文形式执行此操作并不总是方便，因为文章的主要线程可能会丢失，因此在这种情况下，最好使用通过鼠标单击打开的隐藏文本。
点击的对象可以是文本的选定部分或“帮助”部分。 位于便利的位置。
附加信息将在单独段落中的文本的选定部分下打开，而所有其他内容将移动到底部，释放选项卡的空间。
П再次单击所选文本或按钮时，带有工具提示的选项卡将关闭。
例子：
1. 突出显示的文字.
文字-文字-文字-文字-文字 文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字
代码：
Html
<div class="spravca">文字-文字-文字-文字-文字-文字 <input type="checkbox" id="hd-1" class="reference"/>
<label for="hd-1" >Справка</label> 文字-文字-文字-文字-文字-文字
<span class="story">
文字-文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字
</span>
<div>Css
.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}2. Кнопка, которую можно разместить в любой части контента.
文字-文字-文字-文字-文字-文字 文字-文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字
文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字-文字
代码：
Html 与第一个例子中的相同.
Css
.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}您还可以在您的网站风格下在css中安排下拉块。
在HTML5中，默认情况下提供了类似的选项。
它由标签实现
1. <details></details> — 可以展开和折叠的容器.
2. <summary></summary> — 可点击的标题以展开容器。 重新单击折叠容器。
此选项看起来像这样：
头
текст текст текст текст
代码:
<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>
Теги details и summary 默认情况下阻止元素，因此如果需要将容器插入字符串，则需要设置属性 display: inline-block;
您还可以设置其他样式设计。
祝你创造性的成功。
