Форум

samdo · #1 (**permalink**) 05.10.2018, 22:11

Приветствую, братья!
Не первый раз пишу с просьбой в надежде, что (как всегда) мне тут подскажут решение задачки)

Есть конструкция вот такого вида:

Код:

<div class="inner">
	<div class="product-row">Product 1</div>
	<div class="product-row">Product 2</div>
	<div class="product-row">Product 3</div>
	<div class="product-row">Product 4</div>
	<div class="product-row">Product 5</div>
	<div class="product-row">Product 6</div>
	<div class="product-row">Product 7</div>
	<div class="product-row">Product 8</div>
	<div class="view_all">
		<span>View all elements</span>
	</div>
</div>

И css:

Код:

.product-row:nth-child(5),
.product-row:nth-child(6),
.product-row:nth-child(7),
.product-row:nth-child(8) {
	display: none;
}

Подскажите, как по клику на "View all elements" применить "display:block" к тем, кому мы через "nth-child" задали "display:none".

Или сделать из этого спойлер, главное чтобы это работало через nth-child (первые четыре элемента показываем, остальные показываем только по клику).
Спасибо!

рони · #2 (**permalink**) 05.10.2018, 22:18

Сообщение от samdo

как по клику на "View all elements" применить "display:block"

добавить класс блоку inner

samdo · #3 (**permalink**) 05.10.2018, 22:22

Сообщение от рони

добавить класс блоку inner

Классов "inner" несколько на странице (возможно штук 10).

рони · #4 (**permalink**) 05.10.2018, 22:25

Сообщение от samdo

Классов "inner" несколько на странице

обойти циклом все блоки

samdo · #5 (**permalink**) 05.10.2018, 22:28

А без добавления класса для "inner" есть варианты?

рони · #6 (**permalink**) 05.10.2018, 22:36

Сообщение от samdo

А без добавления класса

а зачем усложнять? иначе снова цикл по блокам для клика и в каждом клике поиск нужных блоков , можно конечно делегирование вместо первого клика, но это не отменит бесполезного поиска скрытых блоков.

рони · #7 (**permalink**) 05.10.2018, 22:38

тема отрывашка будет вечной ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.product-row:nth-child(n + 5){
	display: none;
}
.inner.showAll  .product-row {
      display: block;
}
.view_all {
    cursor: pointer;
}

</style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
    var inner = document.querySelectorAll(".inner");
    [].forEach.call(inner, function(div) {
        div.querySelector(".view_all").addEventListener("click", function() {
            div.classList.toggle("showAll")
        })
    })
});
  </script>
</head>

<body>
<div class="inner">
	<div class="product-row">Product 1</div>
	<div class="product-row">Product 2</div>
	<div class="product-row">Product 3</div>
	<div class="product-row">Product 4</div>
	<div class="product-row">Product 5</div>
	<div class="product-row">Product 6</div>
	<div class="product-row">Product 7</div>
	<div class="product-row">Product 8</div>
	<div class="view_all">
		<span>View all elements</span>
	</div>
</div>
<div class="inner">
	<div class="product-row">Product 1</div>
	<div class="product-row">Product 2</div>
	<div class="product-row">Product 3</div>
	<div class="product-row">Product 4</div>
	<div class="product-row">Product 5</div>
	<div class="product-row">Product 6</div>
	<div class="product-row">Product 7</div>
	<div class="product-row">Product 8</div>
	<div class="view_all">
		<span>View all elements</span>
	</div>
</div>
</body>
</html>

samdo · #8 (**permalink**) 06.10.2018, 07:54

Преогромнейшая благодарность.
P.S. Может еще подскажете как сделать, чтобы но плавно появлялось? )

рони · #9 (**permalink**) 06.10.2018, 09:13

Сообщение от samdo

чтобы но плавно появлялось? )

открывашка 230 на js закрыть на указанную величину

ищите по форуму открывашка, есть более 400 примеров

Форум

Справочник

Discord чат

Курсы javascript