Кнопка «Показать еще» Jquery

Дружище, я делал для себя эти подсказки кода, чтобы были в быстром доступе, а оказывается стало много народу заходить и смотреть в данную статью. Если есть вопросы, пиши на почту dedmund@yandex.ru , может и подскажу, если будет время.

Данный вариант показывает элементы по самому простому способу. Ничего не подтягивается из базы данных, все работает только с помощью jquery и css.

Вот так выглядит HTML структура документа. Городить код не стал. Пример, как сделать на вордпресс с помощью плагина acf pro ниже.

<div class="price-table">
    <div class="container">
        <div class="price_block">
            <div class="content-title">Цены</div>
            <table>
                <tr class="title-table">
                    <th>Наименование работы</th>
                    <th>Цена</th>
                </tr>
                <tr>
                    <td>Замена масла</td>
                    <td>5000 руб</td>
                </tr>
                <tr>
                    <td>Замена масла</td>
                    <td>5000 руб</td>
                </tr>
                <tr>
                    <td>Замена масла</td>
                    <td>5000 руб</td>
                </tr>
                <tr>
                    <td>Замена масла</td>
                    <td>5000 руб</td>
                </tr>
                <tr>
                    <td>Замена масла</td>
                    <td>5000 руб</td>
                </tr>
            </table>
            <a class="btn loadMorei" href="#">Показать еще</a>
        </div>
    </div>
</div>

Теперь покажем только 3 элемента, а остальные скроем. Это CSS

table tr{
    display: none;
}
table tr:nth-child(-n+3){
    display: table-row; //если используете div вместе table, то напишите display: block
}
.loadMorei{
    margin-top: 20px;
}

Чтобы все заработало напишем Jquery

//показать еще
(function(){
    $(function () {
        $(".price-table table tr").slice(0, 10).show();
        $(".loadMorei").on('click', function (e) {
            e.preventDefault();
            $(".price-table table tr:hidden").slice(0, 9999).slideDown(300);
            if ($(".price-table table tr:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
        });
    });
})();
//показать еще

Пример готового кода для сайта на WordPress, где используется плагин ACF.

HTML
Сверстаем таблицу на html и php с использованием плагина acf (использую поле repeater/повторитель), чтобы вы могли в админ-панели добавлять бесконечное количество списка цен в данную таблицу.

<?php if( have_rows('цены', $queried_object) ): ?>
<div class="price-table">
    <div class="container">
        <div class="price_block">
            <div class="content-title">Цены</div>
            <table>
                <tr class="title-table">
                    <th>Наименование работы</th>
                    <th>Цена</th>
                </tr>
                <?php while( have_rows('цены', $queried_object) ): the_row(); ?>
                <tr>
                    <td><?php the_sub_field('наименование_работы'); ?></td>
                    <td><?php the_sub_field('цена'); ?></td>
                </tr>
                <?php endwhile; ?>
            </table>
            <a class="btn loadMorei" href="#">Показать еще</a>
        </div>
    </div>
</div>
<?php endif; ?>

LESS
Я использую препроцессор less. Покажем только 10 строк таблицы. Пример на CSS выше.

table{
    tr{
        display: none;

        &:nth-child(-n+10){
            display: table-row;
        }
    }
}
.loadMorei{
    margin-top: 20px;
}

jQuery

//показать еще
(function(){
    $(function () {
        $(".price-table table tr").slice(0, 10).show();
        $(".loadMorei").on('click', function (e) {
            e.preventDefault();
            $(".price-table table tr:hidden").slice(0, 9999).slideDown(300);
            if ($(".price-table table tr:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
        });
    });
})();
//показать еще