Плавно выпадающий DIV / Скрипты / Сниппеты Bootstrap

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress

Язык: Русский

Уникальный ID: 1436

Количество символов:

Посмотрели: 7192 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Плавно, Скрипт, Script, Bootstrap, выпадающий, dropdown, Smooth, smooth dropdown

Поделился: BootstrapТема

Добавлено: 2016-11-29 в 09:00

Метка: 1480399213

⇄ ⇅

function toggle(objName) {
 var obj = $(objName),
 blocks = $("div[id*='menu-']");
 
 if (obj.css("display") != "none") {
 obj.animate({ height: 'hide' }, 500);
 } else {
 var visibleBlocks = $("div[id*='menu-']:visible");

if (visibleBlocks.length < 1) {
 obj.animate({ height: 'show' }, 500);
 } else {
 $(visibleBlocks).animate({ height: 'hide' }, 500, function() {
 obj.animate({ height: 'show' }, 500);
 }); 
 }
 }
}
</script>

<a href="#" onclick="toggle('#menu-1');" class="btn btn-default">Скрипт jQuery для установки</a>

<pre><code>
&lt;a href="#" onclick="toggle('#menu-1');"&gt;Скрипт jQuery&lt;/a&gt;

&lt;div id="menu-1"&gt;
Здесь скрытое содержимое
&lt;/div&gt;

&lt;script&gt;
$(function() {
 $("div[id*='menu-']").hide(); 
})();

if (visibleBlocks.length &lt; 1) {
 obj.animate({ height: 'show' }, 500);
 } else {
 $(visibleBlocks).animate({ height: 'hide' }, 500, function() {
 obj.animate({ height: 'show' }, 500);
 }); 
 }
 }
}
&lt;/script&gt;
</code></pre>

</div>

</div>

<button type="button" onclick="toggle('#menu-2');" class="btn btn-default">Второй блок для примера</button>

</div>

</div>
</div>

BootstrapTema

Плавно выпадающий DIV

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0