Справочники, инструменты, документация

Javascript: Раскрывающиеся блоки

Раскрывающиеся блоки на JavaScript и CSS.

Раскрывающиеся блоки на чистом JavaScript

Первая страница

Содержание страницы 1
Это первая страница
Не вторая, не третья
Это только первая страница! Это начало!
Вперед 
 <div id='page01'>
 <h4>Первая страница</h4>
 Содержание страницы 1<br>
 Это первая страница<br>
 Не вторая, не третья<br>
 Это только первая страница! Это начало!<br>
 <br><br>
 <a href='#' onclick="document.getElementById('page01').style.display='none'; document.getElementById('page02').style.display='block';">Вперед</a>
 </div>
 <div id='page02' style='display: none'>
 <h4>Вторая страница</h4>
 Содержание страницы 2<br>
 Это вторая страница<br>
 Не первая, не третья<br>
 Это только вторая страница!<br>
 <br><br>
 <a href='#' onclick="document.getElementById('page02').style.display='none'; document.getElementById('page01').style.display='block';">Назад</a>
 <a href='#' onclick="document.getElementById('page02').style.display='none'; document.getElementById('page03').style.display='block';">Вперед</a>
 </div>
 <div id='page03' style='display: none'>
 <h4>Третья страница</h4>
 Содержание страницы 3<br>
 Это последняя страница<br>
 Не первая, не вторая<br>
 Это конец!<br>
 <br><br>
 <a href='#' onclick="document.getElementById('page03').style.display='none'; document.getElementById('page02').style.display='block';">Назад</a>
 </div>

Раскрывающиеся блоки на чистом CSS

HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме..


CSS - CSS Cascading Style Sheets — каскадные таблицы стилей — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.


JavaScript — прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript (стандарт ECMA-262). JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам...


jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX. 
<style type="text/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: #333;
 padding: 10px;
 margin-top: 10px;
 border-radius: 4px;
}
</style>

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

 <input type="checkbox" id="hd-2" class="hide"/>
 <label for="hd-2">Нажмите здесь, чтобы увидеть скрытый текст №2</label>
 <div>Скрытый текст №2</div>

 <input type="checkbox" id="hd-3" class="hide"/>
 <label for="hd-3" >Нажмите здесь, чтобы увидеть скрытый текст №3</label>
 <div>Скрытый текст №3</div>

 <input type="checkbox" id="hd-4" class="hide"/>
 <label for="hd-4">Нажмите здесь, чтобы увидеть скрытый текст №4</label>
 <div>Скрытый текст №4</div>
</div>
На этой странице