Раскрывающийся блок со скрытым содержанием на 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>
Код и скрипт можно вставить куда угодно и использовать для различных целей. Применяйте стили к блокам, чтобы они красиво отображались или выделялись на фоне сайте. Проявите творчество!
Всем удачи и добра!


Последнее от Макс Пуля
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры
- Сервер, проекты и ffmpeg
- Семантическое ядро сайта
- Хостинг на домашнем сервере Open Server, DDNS и динамический IP-адрес