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

Для этого необходимо создать некое подобие переключателя.

Для начала создадим ссылку переключатель и сам контейнер, который по умолчанию скрыт.

<a href="#" id="showHideContent">Показать/Скрыть</a>

<div id="content" style="display:none;">Содержание, которое скрыто по-умолчанию. Покажется/скроется при клике на одну и ту же ссылку.</div>

Теперь необходимо "оживить" нашу задачу.

  $(document).ready(function(){

	    $("#showHideContent").click(function () {
			if ($("#content").is(":hidden")) {

				$("#content").show("slow");

			} else {

				$("#content").hide("slow");

			}
  return false;
});
});

При клике на ссылку с id="showHideContent", скрипт проверит, если контейнер скрыт is(":hidden"), то его необходмо показать, если же нет контент скроется.

Также эту задачу можно решить немного другим способом, используя функцию slideToggle().

$('#showHideContent').click(function(){
		$('#content').slideToggle(250);
		return false;
              });

Или, например, так.

var i=0;

$('#showHideContent').click(function(){
i = 1 - i;
if ( i == 1) {
$("#content").show("slow");

} else {
$("#content").hide("slow");
}
return false;
});

Какой использовать выбирать вам от поставленной задачи.

(Visited 13 299 times, 6 visits today)