Javascript-форум - Display:none to display:block ?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Display:none to display:block ? (https://javascript.ru/forum/misc/75405-display-none-display-block.html)

Display:none to display:block ?

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

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

Код:

<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 (первые четыре элемента показываем, остальные показываем только по клику).
Спасибо!

Цитата:

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

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

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

Цитата:

Сообщение от рони (Сообщение 495846)

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

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

Цитата:

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

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

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

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

Цитата:

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

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

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

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

<!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>

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

Цитата:

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

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

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

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