Как реализовать "показать ещё" в bootstrap'e

Тема в разделе "JavaScript", создана пользователем AnOcToJI, 30 ноя 2017.

  1. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    Доброго времени суток, помогите кто чем может)

    Собственно имеем кучу строк вида
    Код:
    <div class="container">
        <div class="row">
     <div class="col-sm-6"></div>
     <div class="col-sm-6"></div>
    </div>
        <div class="row">
     <div class="col-sm-6"></div>
     <div class="col-sm-6"></div>
    </div>
        <div class="row">
     <div class="col-sm-6"></div>
     <div class="col-sm-6"></div>
    </div>
        <div class="row">
     <div class="col-sm-6"></div>
     <div class="col-sm-6"></div>
    </div>
        <div class="row">
     <div class="col-sm-6"></div>
     <div class="col-sm-6"></div>
    </div>
        <div class="row">
     <div class="col-sm-6"></div>
     <div class="col-sm-6"></div>
    </div>
    </div>
    
    нужно изначально показывать только два первых <div class="row">...</div>
    а остальные подгружать динамически по нажатию на кнопку "Показать ещё"
    можно ли это средством бутстрапа реализовать? а то я что-то не нашёл
    и если нельзя ткните в какое-нибудь готовое решение, а то пытался найти так и не смог
     
  2. Master2KAZ

    Master2KAZ

    Регистрация:
    25 окт 2014
    Сообщения:
    183
    Симпатии:
    72
    Остальные надо подгружать или показывать динамически?
    Если показывать:
    Код:
    <div class="container" id="some_block">
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
        <div class="row">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
        <div class="row hidden">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
        <div class="row hidden">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
        <div class="row hidden">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>
        <div class="row hidden">
            <div class="col-sm-6"></div>
            <div class="col-sm-6"></div>
        </div>   
    </div>
    <button id="show_more">Показать еще</button>
    
    <script type="text/javascript"><!--
        $("#show_more").on("click", function() {
            $("#some_block .hidden").removeClass(".hidden");
        });
    //--></script>
    А если подгружать - то это через ajax подгружать данные и по success собирать html и аппендом добавлять к some_block.

    P.S. Сильно не ругайтесь, я с похмелья..)))
     
    $iD нравится это.
  3. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    вместо добавления/удаления классов можно использовать show/hide

    но, вопрос предыдущего комментатора актуален
     
  4. AnOcToJI

    AnOcToJI

    Регистрация:
    28 дек 2012
    Сообщения:
    309
    Симпатии:
    188
    Подгружать только по нажатию кнопки, динамически имелось ввиду чтобы страница не перезагружалась(хотя да лишнее было это)
    и показывать нужно не все оставшиеся а к примеру ещё 2 блока row потом ещё и т.д
     
    Последнее редактирование: 30 ноя 2017
  5. $iD

    $iD Команда форума

    Регистрация:
    13 мар 2012
    Сообщения:
    3.580
    Симпатии:
    1.482
    ajax?
     
  6. Master2KAZ

    Master2KAZ

    Регистрация:
    25 окт 2014
    Сообщения:
    183
    Симпатии:
    72
    В обоих случаях все происходит без перезагрузки страницы. Просто в одном случае - все данные загружаются сразу со страницей, но все кроме первых 2-х скрыты, а во-втором случае вместе со странице загружаются только данные 2-х дивов, а остальные уже подгружаются аяксом.

    К примеру когда на сайте идет блок с "Преимуществами" первые 3 видны, остальные загружены со страницей, но скрыты... так как данных немного...
    А если речь идет например о товарах, то товаров может быть десятки тысяч и подгружать их сразу со страницей глупо - слишком большой объем данных, поэтому вместе со странице загружается несколько товаров, а остальные подгружаются аяксом.
     
    AlexGood и $iD нравится это.