Hide Element on click

<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">Нажмите здесь, чтобы открыть!</label>

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

CSS
/*

/* скрываем чекбоксы и блоки с содержанием */
.hide, .hide + label ~ div {
    display: none; 
}
/* вид текста label */
.hide + label,
.hide:checked + label {
    padding: 0;
    color: green;
    cursor: pointer;
    border-bottom: 1px dotted green;
}
/* вид текста label при активном переключателе */
.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; 
}

*/