Вторник, 28 Август 2018 15:34

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

Автор

Оцените материал
(595 голосов)
Раскрывающийся блок со скрытым содержанием на JavaScript Раскрывающийся блок со скрытым содержанием на 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> 

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

Всем удачи и добра!

Прочитано 847 раз

Поделитесь с друзьями этой статьей!

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.

epicblog.net

Оставить комментарий