Появляющийся и исчезающий блок с помощью javascript

Думаю каждый из вас встречал на некоторых сайтах некий блок который можно скрыть или раскрыть, так вот, сегодня мы научимся делать именно это, при помощью html и js.

Данная задача решает очень много проблем, например: большое количество контента который нужен не всем; длинный список, который не всегда уместен на сайте.

Ну что, приступим к написанию кода.

Пример

Первый элемент


Для начала создадим каркас на html

<div>
<a href="#" class="block" onClick="open_block()">
Первый элемент
</a>
<div id="contents" style="display:none" onClick="close_block()">
<p>Описание первого элемента</p>
</div>
</div>

Как мы видим, изначально описание закрыто в display:none

Теперь опишем сценарий.

<script type="text/javascript">
function open_block() {
	var contents = document.getElementById('contents');
		if (contents.style.display == 'none') {
			contents.style.display = 'block';
		}
		else {
			contents.style.display = 'none';
		}
	}
	
function close_block() {
	var contents = document.getElementById('contents');
	contents.style.display = 'none';
}
</script>

Данный сценарий реализует открытие пояснения которое было спрятано изначально. Так же, при нажатии на область блока - произойдёт обратное (закрытие блока).

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Сумма значений таблицы и количество значений в столбце

Запуск shell сценария из php

Создание сайта на Flash - преимущества и недостатки

Вирусы в ipad

Знакомства в интернете – стоит ли игра свеч?

Комментарии:

Добавленно - 2012-01-13

Павел пишет:

При нажатии на ссылку в данном уроке, страница поднимается вверх.. то есть, если прокрутить страницу вниз, и нажать на ссылку, то страница автоматически поднимается вверх к шапке. если это использовать в длинном тексте, то будет очень неудбно

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =