Очень часто при написании статьи на сайтах или блогах появляется необходимость спрятать часть текста или кода или еще чего - то под спойлер ниже представлен вариант примера с кодом.
исчезающий текст
Код спойлера:
<style>
#no-div, .no { display: none; }
.no + label { /* вид CSS кнопки */
background: #4e6473;
padding: 9px 10px;
border-radius: 2px;
color: #fff;
cursor: pointer; }
.no:checked + label { background: #e36443; }
.no:checked ~ #no-div { display: block; }
</style>
<input type="checkbox" id="raz" class="no"/><label for="raz">Ваш текст о скрытой информации - кликнуть!</label><div id="no-div"><br />
<br />исчезающий текст</div>
#no-div, .no { display: none; }
.no + label { /* вид CSS кнопки */
background: #4e6473;
padding: 9px 10px;
border-radius: 2px;
color: #fff;
cursor: pointer; }
.no:checked + label { background: #e36443; }
.no:checked ~ #no-div { display: block; }
</style>
<input type="checkbox" id="raz" class="no"/><label for="raz">Ваш текст о скрытой информации - кликнуть!</label><div id="no-div"><br />
<br />исчезающий текст</div>
Комментариев нет:
Отправить комментарий