Появление новой строки элементов при нажатии кнопки
Всем привет, помогите решить задачку, при нажатии на кнопку нужно чтобы появлялась 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>
|
кнопка показать больше
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>
|
Спасибо большое):victory:
|
| Часовой пояс GMT +3, время: 20:32. |