Войти Регистрация

Сворачивание и разворачивание блока на javascript


Передо мной стояла задача написать плавное сворачивание и разворачивание блока на javascript, без использования библиотек jqery и ей подобных. Но эффект должен быть подобен jquery toggle, то есть должно быть плавное сворачивание блока и разворачивание блока, как вконтакте.

Решением данной задачи является мною написанная javascript функция, которая не занимает более 1,3кб.

Ниже предоставлен код и пример использования функции сворачивания/разворачивания div блоков.

js код сворачивания/разворачивания блока

function toggle(id)
{
	var e = document.getElementById(id);
	var dh = gh(id);
	var elems = e.getElementsByTagName('*');
	
	if (e.style.display == "none")
	{
		for(var i=0; i<elems.length; i++){vhe(elems[i], "hidden");}
	
		e.style.height="1px";
		e.style.display = "block";
		for(var i=0;i<=100;i+=5)
		{
			(function()
				{
					var pos=i;
					setTimeout(function(){e.style.height = (pos/100)*dh+1+"px";},pos*5);
				}
			)();
		}
		setTimeout(function(){for(var i=0; i<elems.length; i++){elems[i].style.visibility="visible";}},500);
		return true;
	}
	else
	{
		var lh=dh-1+"px";
		
		for(var i=0; i<elems.length; i++){vhe(elems[i], "hidden");}
		
		for (var i=100;i>=0;i-=5)
		{
			(function()
				{
					var pos=i;
					setTimeout(function()
					{
						e.style.height = (pos/100)*dh+"px";
						if (pos<=0)
						{
							e.style.display = "none";
							e.style.height=lh;
						}
					},1000-(pos*5));
				}
			)();
		}
		return true;
	}
	return false;
}

function vhe(obj, vh){obj.style.visibility=vh;}

function gh(id)
{
	var e = document.getElementById(id);
	if(e.style.display == "none")
	{
		e.style.visibility = "hidden";
		e.style.display = "block";
		dh = e.clientHeight||e.offsetHeight+5; // Высота
		e.style.display = "none";
		e.style.visibility = "visible";
	}
	else
	{
		dh = e.clientHeight||e.offsetHeight+5; // Высота
	}
	return dh;
}

Как видите в примере предоставлено три функции: toggle - отвечает за сворот/разворот блока, а остальные вспомогательные, одна определяет высоту div блока, другая показывает или скрывает дочерние элементы нужного блока.

Использование функции:

<div id="block" style="display:none;">
		<input type="text" value="логин"/>
		<input type="text" value="пароль"/>
		Текст блока...
		<input type="submit" value='Войти'/>
</div>
<div onClick="toggle('block');">Свернуть/Развернуть</div>

Как видите все просто, по нужному событию посылаем у функцию id блока и наслаждаемся красивым сворачиванием и разворачиванием блока на javascript



Дальше: Оптимизационная стратегия


Дискуссия по теме    18 Комментариев
Добавить комментарий
Генрих Третий 01.10.2015 в 04:20
Здраствуйте. Как-то можно избавиться от боковой прокрутки, при развороте контента со скриптом?
Дмитрий 07.07.2014 в 17:17
<div onClick="toggle('block');">Текст кнопки <img id="img_button" src="plus.png"/></div> При перезагрузке страницы, картинка меняется на src="plus.png"
Дмитрий 19.12.2013 в 21:01
я использую в качестве кнопки для раскрытия/скрытия картинку. Как сделать, чтобы при закрытом див блоке картинка была одна, а при раскрытом другая
Тарас 20.12.2013 в 03:15
Кнопка свернуть развернуть будет выглядеть так: <div onClick="toggle('block');">Текст кнопки <img id="img_button" src="plus.png"/></div> В коде функции toggle дописываем две строки: ... if (e.style.display == "none") { img_button.src='minus.png'; ... } else { img_button.src='plus.png'; ... Это урывки из кода, надеюсь все понятно... если так не будет работать попробуйте вместо img_button, обращатя к элементу через: document.getElementById('img_button').src='minus.png'; ну и после else тоже самое только меняем на плюс.
Юлия 28.05.2013 в 17:56
Огромное СПАСИБО!!! Действительно - простенько и со вкусом :)
Сергей 25.11.2012 в 00:55
Спасибо, все ваши уроки помогли, но есть у меня одна проблема. Нажав кнопку комментировать, получаю сообщение о том, что комментарии добавлен и на этом все. Чтобы увидеть добавленный комментарии приходиться обновлять страницу браузера. Подскажите, пожалуйста , как это можно исправить. Заранее спасибо.
Тарас 25.11.2012 в 21:54
Насколько понимаю, комментарий касается этого урока http://sitear.ru/material/php-script-kommentariev ??? Если да, то придется дописать js код. Со стороны сервера возвратить json обьект с данными (что-то подобное массивам в PHP), после чего в js коде (функция success) обрабатываем эти данные и формируем кусок html кода с комментарием, после чего вставляем в DOM структуру страницы (в начало или конец необходимого нам div элемента со всеми комментариями).
Владимир 04.11.2012 в 17:48
А как сделать, чтобы элемент внутри div был изначально открыт, а при нажатии сворачивался?
Тарас 04.11.2012 в 22:33
Так же само, только установить css display:block; вот так: <div id="block" style="display:block;"> <input type="text" value="логин"/> <input type="text" value="пароль"/> Текст блока... <input type="submit" value='Войти'/> </div> <div onClick="toggle('block');">Свернуть/Развернуть</div>
CooLLer 16.06.2012 в 16:49
Если можно, покажите пожалуйста на вашем примере чего куда писать. Заранее большое спасибо!
Тарас 16.06.2012 в 22:54
На этом сайте форма входа и регистрации разворачивается с помощью этого кода... нажмите правую кнопку мыши и посмотрите исходный код, а сама javascript функция прописана в файле http://sitear.ru/js/js_main.js
imya 29.05.2012 в 23:46
а как сделать так чтоб сворачивался при щелчке по любому месту страницы дополнительно?
Тарас 03.06.2012 в 00:12
Можно прописать в теге body событие onClick="toggle(id)", или в каком то глобальном div блоке.
imya 03.06.2012 в 07:14
Тарас а можешь простой код показать, например <div class="menu"> <span class="button">кнопка</span> <ul> <li><a href="#">0</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> чтоб при щелчке по кнопке произошло раскрытие меню, которое бы не свернулось покудо не щелкнешь по любой точке экрана. Самый простой скрипт для меню такого, который можешь придумат если не трудно. Спасибо.
Тарас 05.06.2012 в 00:31
<div class="button" onClick="toggle('m');">кнопка</div> <div class="menu" id="m" style="display:none;"> <ul> <li><a href="#">0</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> Будет так: 1. меню изначально скрытое 2. по кнопке нажали - развернулось 3. еще раз нажали по кнопке - свернулось
imya 05.06.2012 в 02:30
С этим способом автоскрытия меню я знаком, спасибо Тарас. Интересует именно сворачивание меню по щелчку по любому месту страницы. на mail.ru та сделано когда вверху щелкаешь по кнопке ЕЩЁ то появляется меню, которое скрывается когда либо по ЕЩЁ щелкнешь либо по любому месту на странице и меню скрывается. Можешь с таким подсказать, как устроить? спасибо за ответ
imya 05.06.2012 в 02:40
теперь понял, спасибо )
Петр 21.05.2012 в 13:29
Спасибо за статью! Полезная)
Добавить комментарий
Просмотров: 22322