Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   По клику на кнопку открыть сразу несколько DIV (https://javascript.ru/forum/dom-window/79691-po-kliku-na-knopku-otkryt-srazu-neskolko-div.html)

BOOSOORMAN 10.03.2020 11:38

По клику на кнопку открыть сразу несколько DIV
 
Здравствуйте, помогите пожалуйста решить задачу.
<div class="wrapper">
  <div class="inner">Контент 1</div>
  <div class="inner">Контент 2</div>
  <div class="inner">Контент 3</div>
  <div class="inner">Контент 4</div>
  <div class="inner">Контент 5</div>
  <div class="inner">Контент 6</div>
  <div class="inner">Контент 7</div>
  <div class="inner">Контент 8</div>
  <div class="inner">Контент 9</div>
  <div class="inner">Контент 10</div>
  <div class="inner">Контент 11</div>
  <div class="inner">Контент 12</div>
  <div class="inner">Контент 13</div>
<button class="nextstep">Следующий шаг</button>
</div>

Таких DIV с классом (.inner) могут быть в количестве 50 штук и 3 штуки, отображаться они должны в количестве максимум 6 штук, а остальные DIV с классом (.inner) должны быть скрыты, для этого я нашел вот этот код
<script>
var myDivs = document.getElementsByClassName('inner');
for (var myD = 6; myD < myDivs.length; myD++) {
  myDivs[myD].style.display = 'none'
};
</script>

далее по клику на кнопку с классом (.nextstep) должны открываться по 6 DIV с классом (.inner) и после как закончиться скрытые DIV, кнопка с классом (.nextstep) должна исчезнуть, для этого я нашел вот этот код
<script>
var activeStep = 6;
$(".nextstep").click(function () {
  $('.inner').eq(activeStep ++).show(500);
  if (activeStep == $('.inner').length) $(this).hide();
});
</script>

но с этим кодом открываются по одному DIV, а надо по 6 штук.

Как сделать так, что бы по клику на кнопку открывались по 6 DIV
и как скрыть кнопку если DIV с классом (.inner) в общем количестве меньше 6 штук.

рони 10.03.2020 12:55

BOOSOORMAN,
https://javascript.ru/forum/dom-wind...tml#post520420

BOOSOORMAN 10.03.2020 15:15

Спасибо Вам большое, попробую разобраться и внедрить Ваш код.

FreeStyler 11.03.2020 17:35

BOOSOORMAN,
<script>
var activeStep = 6;
$(".nextstep").click(function () {
  $('.inner').eq(activeStep ++).show(500);
$('.inner').eq(activeStep ++).show(500);
$('.inner').eq(activeStep ++).show(500);
$('.inner').eq(activeStep ++).show(500);
$('.inner').eq(activeStep ++).show(500);
$('.inner').eq(activeStep ++).show(500);
  if (activeStep >= $('.inner').length) $(this).hide();
});
</script>


Часовой пояс GMT +3, время: 05:01.