Форум

BarsBelka · #1 (**permalink**) 29.10.2021, 20:02

Всем привет, помогите решить задачку, при нажатии на кнопку нужно чтобы появлялась 2 строка элементов в блоке и после их появления кнопка должна удалиться. Помогите пожалуйста.

<section>
        <img src="/img/dat2.jpg" alt="dat2" class="dats">
        <div class="catalog">
            <div class="container">
                <h1>Каталог фактур</h1>
                <div class="catalog-cards">
                    <!-- Первая строка -->
                    <div class="catalog-card">
                        <img src="/img/grotto.png" alt="grotto">
                        <h2>grotto</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/marmorino.png" alt="marmorino">
                        <h2>marmorino</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/veneziano.png" alt="veneziano">
                        <h2>VENEZIANO</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/magie.png" alt="magie">
                        <h2>MAGIE</h2>
                    </div>
                    <!-- Вторая строка -->
                    <div class="catalog-card">
                        <img src="/img/lava.png" alt="lava">
                        <h2>lava</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/persia.png" alt="persia">
                        <h2>persia</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/sahara gold.png" alt="sahara gold">
                        <h2>sahara gold</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/travertino.png" alt="travertino">
                        <h2>TRAVERTINO</h2>
                    </div>
                </div>
                <div class="butn">
                    <button class="catalog-btn">Показать больше</button>
                </div>
            </div>
        </div>
    </section>

рони · #2 (**permalink**) 29.10.2021, 20:44

BarsBelka,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container .catalog-cards .catalog-card:nth-child(n + 5) {
            height: 0;
            overflow: hidden;
        }
        .container.show .catalog-cards .catalog-card:nth-child(n + 5) {
            height: auto;
        }
        .container.show .butn {
            display: none;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            function more(event) {
                if (event.target.closest(".butn")) this.classList.add("show")
            }
            document.querySelectorAll(".container").forEach(el => {
                el.addEventListener("click", more);
            })
        });
    </script>
</head>
<body>
    <section>
        <img src="/img/dat2.jpg" alt="dat2" class="dats">
        <div class="catalog">
            <div class="container">
                <h1>Каталог фактур</h1>
                <div class="catalog-cards">
                    <!-- Первая строка -->
                    <div class="catalog-card">
                        <img src="/img/grotto.png" alt="grotto">
                        <h2>grotto</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/marmorino.png" alt="marmorino">
                        <h2>marmorino</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/veneziano.png" alt="veneziano">
                        <h2>VENEZIANO</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/magie.png" alt="magie">
                        <h2>MAGIE</h2>
                    </div>
                    <!-- Вторая строка -->
                    <div class="catalog-card">
                        <img src="/img/lava.png" alt="lava">
                        <h2>lava</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/persia.png" alt="persia">
                        <h2>persia</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/sahara gold.png" alt="sahara gold">
                        <h2>sahara gold</h2>
                    </div>
                    <div class="catalog-card">
                        <img src="/img/travertino.png" alt="travertino">
                        <h2>TRAVERTINO</h2>
                    </div>
                </div>
                <div class="butn">
                    <button class="catalog-btn">Показать больше</button>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

BarsBelka · #3 (**permalink**) 30.10.2021, 10:10

Спасибо большое)

Форум

Справочник

Discord чат

Курсы javascript