Вариант скрытого текста на чекбоксах

by Kocsten

HTML

<input type="checkbox" id="hd-1" class="hide"/>
<label for="hd-1" >Нажмите здесь, чтобы узнать больше о HTML!</label>
<div>текст</div>
<br/>
<br/>
<input type="checkbox" id="hd-2" class="hide"/>
<label for="hd-2">Нажмите здесь, чтобы узнать больше о CSS!</label>
<div>текст</div>

CSS

.hide, .hide + label ~ div {
    display: none; 
}
/* вид текста label */
.hide + label,
.hide:checked + label {
    border-bottom: 1px dotted green;
    padding: 0;
    color: green;
    cursor: pointer;
}
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px;
 /* задержка появления функция анимации */
     -webkit-animation:fadeIn ease-in 0.5s; 
     -moz-animation:fadeIn ease-in 0.5s;
     animation:fadeIn ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
    from { opacity: 0; }
to { opacity: 1 }
}