Продолжаем знакомиться с JavaScript’ом. На этот раз рассмотрим принцип появления и исчезновения какого-либо элемента при различных событиях в браузере.

Смотрите также материал о том, как получить id, class и другие данные элемента по клику

Сделаем так, чтобы при клике на кнопу включался и выключался определенный div, зададим ему свойство id=”text”.

Теперь с кнопкой. Так как мы хотим обработать нужным нам образом событие клика по кнопке, то в свойствах кнопки запишем <button onclick="chpok('text')">TEST</button>, где в аргументе нашей будущей функции chpok() укажем id нашего блока, который будем прятать: 'text'.

Теперь к самому коду:

Реализация на чистом JavaScript:

JavaScript: 
<script>
function chpok(id){
	elem = document.getElementById(id); //находим блок div по его id, который передали в функцию
	state = elem.style.display; //смотрим, включен ли сейчас элемент
	if (state =='') elem.style.display='none'; //если включен, то выключаем
	else elem.style.display=''; //иначе - включаем
}
</script>

HTML: 
<button onclick="chpok('text')">TEST</button>
<div id="text">
	My Text
</div>


Реализация того же на jQuery:

jQuery:

<script type="text/javascript" src="http://yastatic.net/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  //дожидаемся загрузки страницы
	$('#btn1').on("click", function(){  //вешаем событие на клик по кнопке id="btn1"
		$('#text').toggle(); //включает/выключает элемент id="text"
	});
});
</script>

HTML:

<button id="btn1">TEST</button>
<div id="text">
    My Text
</div>

Вот и всё, довольно просто.

Кстати, вот список из некоторых популярных событий JavaScript:

onclick – при клике на элемент;

onscroll – при прокрутке экрана;

onmouseover /onmouseout – когда мышь входит / покидает область элемента;

onfocus – когда поле ввода становится активным;

onblur – когда поле ввода становится неактивным;

onchange – когда пользователь меняет значение в поле ввода или параметр выпадающем списке.

На сегодня всё, внимательно следите за кавычками, скобками и точками с запятыми! При ошибках в их простановке работать ничего не будет!