Раскрывающиеся блоки для подсказок или дополнительной информации

Здравствуйте уважаемые начинающие веб мастера.

Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.

Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.

Объектом для клика может быть выделенная часть текста или кнопка "Справка" размещёная в удобном месте.

Дополнительная информация будет открываться под выделенной частью текста отдельным абзацем, при этом весь остальной контент будет сдвигаться в низ, освобождая место для вкладки.

При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.

Примеры:

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 под стиль вашего сайта.

Желаю творческих успехов!