Скрипт скрытого списка li / Скрипты / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

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

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

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

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

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

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

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

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

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

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

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

Теги: Скрипт, Script, Snippet, html, список, li, сниппет, Bootstrap, List

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

Добавлено: 2017-04-24 в 19:55

Метка: 1566192432

⇄ ⇅

<li>

<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title text-center"><a href="https://bootstraptema.ru/" target="_blank">Скрипт скрытого списка</a></h1>
</div>
<div class="panel-body">
<pre><code>
 $(document).ready(function () {
 on_li = $("#fulllist li").size();
 x=1;
 $('#fulllist li:lt('+x+')').show();
 $('#otkr').click(function () {
 x= (x+1 <= on_li) ? x+1 : on_li;
 $('#fulllist li:lt('+x+')').show();
 });
 $('#zakr').click(function () {
 x=(x-1<0) ? 1 : x-1;
 $('#fulllist li').not(':lt('+x+')').hide();
 });
 });
</code></pre>
</div>
<div class="panel-footer">
<p class="text-center">BootstrapTema</p>
</div>
</div>

</li>
<li>

<div class="col-xs-12">
<p>Кроме первого, каждый последующий в <code>&lt;li&gt;</code> набор HTML элементов изначально скрыт. При нажатии или клике на кнопку открывается следующая часть списка, вложенных списков может быть необходимое количество, содержимое может иметь разнообразный HTML тип. Аналогично раскрытию, при нажатии на кнопку скрытия элементы списка скрываются.</p>
</div>

</li>
<li>

</li>

</ul>

<div class="col-md-6"><button id="otkr" class="btn btn-default btn-block btn-success"><i class="glyphicon glyphicon-eye-open"></i> Раскрыть</button></div>
<div class="col-md-6"><button id="zakr" class="btn btn-default btn-block btn-danger"><i class="glyphicon glyphicon-eye-close"></i> Скрыть</button></div>

</div></div></div>

BootstrapTema

Скрипт скрытого списка li

Скриншот

Подробнее

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

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

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