Для получения полного доступа
зарегистрируйтесь

Раскрытие списков в Bootstrap 3


UPD: обновил сниппет, спасибо Great-Antique

Когда на странице в списках много элементов, то её нужно как-то скрывать. В проекте использовал такое решение:

1llArka.png

Например, у нас будет такая разметка:

<ul class="list-group hidden-attributes">
    <li class="list-group-item attr">Операционная система: Android 5.0 </li>
    <li class="list-group-item attr">Процессор: Qualcomm Snapdragon 410 APQ8016</li>
    <li class="list-group-item attr">Количество ядер: 4 </li>
    <li class="list-group-item attr">Встроенная память: 16 Гб </li>
    <li class="list-group-item attr">Оперативная память: 1 Гб</li>
    <li class="list-group-item text-center">
    <a href="#" class="show-attributes">
        <span class="control">Показать больше записей...</span>
        <span class="control hidden">Меньше записей</span>
    </a>
</ul>

Добавим стили. Скрываем всё начиная с 4 элемента в списке:

.list-group-item.attr:nth-child(n+4) {
    display: none;
    list-style: none;
}

Осталось добавить js, который будет раскрывать / скрывать список:

jQuery(function ($) {
    $('.hidden-attributes').on('click', '.show-attributes', function(e) {
        $('.control', $(e.delegateTarget)).toggleClass('hidden');
        $('.attr:nth-child(n+4)', $(e.delegateTarget)).fadeToggle();
        
        e.preventDefault();
    });
});

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация