Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.10.2021, 20:02
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

Появление новой строки элементов при нажатии кнопки
Всем привет, помогите решить задачку, при нажатии на кнопку нужно чтобы появлялась 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

кнопка показать больше
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>
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2021, 10:10
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

Спасибо большое)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Менять курсор при нажатии левой кнопки мыши Igorsrt Элементы интерфейса 21 31.10.2018 09:18
Замена background при нажатии кнопки Musica24 Элементы интерфейса 3 18.12.2015 09:43
Появление текста при нажатии на ссылку Dalave1998 Элементы интерфейса 1 11.06.2014 19:11
Получение данных строки грида при нажатии сторонней кнопки Allan Stark ExtJS 4 17.11.2011 19:21
Восстановление hidden field при нажатии кнопки Назад в браузере debugx Элементы интерфейса 1 19.10.2011 19:03