Раскрывающиеся блоки с скрытым содержанием с помощью CSS3

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

by Andrey Dobrovoi

HTML

<div class="demo">
    <input type="checkbox" id="hd-1" class="hide"/>
    <label for="hd-1" >Нажмите здесь, чтобы увидеть скрытый текст №1</label>
    <div>
        HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..
    </div>
    <br/>
    <br/>
    <input type="checkbox" id="hd-2" class="hide"/>
    <label for="hd-2">Нажмите здесь, чтобы увидеть скрытый текст №2</label>
    <div>
        CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
    </div>
    <br/>
    <br/>
    <input type="checkbox" id="hd-3" class="hide"/>
    <label for="hd-3" >Нажмите здесь, чтобы увидеть скрытый текст №3</label>
    <div>
        JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам...
    </div>
    <br/>
    <br/>
    <input type="checkbox" id="hd-4" class="hide"/>
    <label for="hd-4">Нажмите здесь, чтобы увидеть скрытый текст №4</label>
    <div>
        jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.
    </div>
</div>

CSS

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

/* demo контейнер */
.demo {
    margin: 5% 10%;
}