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

Автор Макс Пуля

Отображение скрытого текста при нажатии на ссылку - самый простой способ сделать раскрывающиеся блоки с помощью скрипта

Один маленький скрипт и немного кода HTML способны сделать плавно раскрывающийся блок со скрытым содержанием.

Допустим, вам нужно, чтобы в контенте была ссылка, которая раскрывала бы какое-то скрытое содержание. И при этом раскрывающийся список меню вам не подходит (accordion). К примеру, у вас есть одна страница, и на ней нужно расположить много информации.

Что ходить вокруг да около Смотрите примеры ниже.

Нажми эту ссылку

Нажми меня!

А теперь сам код, который нужно встроить в ваш сайт.

HTML

<p>Нажми <a href="#hidden1" onclick="view('hidden1'); return false">эту ссылку</a></p>
<div id="hidden1" style="display: none;">
<h3>Тут заголовок</h3>
<p>А тут основной текст</p></div>

<a href="#hidden2" onclick="view('hidden2'); return false">Нажми меня!</a>
<div id="hidden2" style="display: none;">
<h3>Тут заголовок</h3>
<p>А тут основной текст</p></div>

JavaScript

<script>function view(n) {
    style = document.getElementById(n).style;
    style.display = (style.display == 'block') ? 'none' : 'block';
}</script>

Код и скрипт можно вставить куда угодно и использовать для различных целей. Применяйте стили к блокам, чтобы они красиво отображались или выделялись на фоне сайте. Проявите творчество!