<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>
/* скрываем чекбоксы и блоки с содержанием */ .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%; }