Обернуть часть элементов в тег и открывать сокрытый блок по клику

Question

Есть список элементов. Сделаю код для примера:

<div class="elem req">Visible</div>
<div class="elem req">Visible</div>
<div class="elem">Hidden</div>
<div class="elem">Hidden</div>

Как правильно обернуть элементы, не имеющие класс req, после чего добавить вверху открывающую кнопку. Порядок может быть хаотичным. Ниже код, что примерно должно получится:

window.addEventListener("DOMContentLoaded", function() {

  let button = document.querySelector('.toggle')
  let hidden = document.querySelector('.hidden')

  button.addEventListener('click', function(e) {
    this.classList.toggle('active');
    hidden.classList.toggle('visible');
  });
});

.hidden {
  display: none;
}

.visible {
  display: block;
}

.active {
  color: red;
}

<div class="elem req">Visible</div>
<div class="elem req">Visible</div>
<button class="toggle">Try it</button>
<div class="hidden">
  <div class="elem">Hidden</div>
  <div class="elem">Hidden</div>
</div>

Можно использовать и jQuery. С ним то через .before можно и кнопку вставить, и с открыванием сокрытых элементов нет проблем и даже обернул нужные теги, когда их порядок не нарушен. Но, на чистом JS не выходит никак. Хотя бы подкиньте, что почитать или какими образом реализовать.

Спасибо

Answer 1

window.addEventListener("DOMContentLoaded", function() {

  let button = document.querySelector('.toggle');
  let hidden = document.querySelector('.hidden');
  let elems = [...document.querySelectorAll('.elem')];

  elems.forEach(el => {
    if (!el.classList.contains('req')) { hidden.append(el); }
  });

  button.addEventListener('click', function(e) {
    this.classList.toggle('active');
    hidden.classList.toggle('visible');
  });
});

.hidden { display: none; }
.visible { display: block; }
.active { color: red; }

<div class="elem req">Visible</div>
<div class="elem req">Visible</div>
<div class="elem">Hidden</div>
<div class="elem">Hidden</div>
<div class="elem req">Visible</div>
<div class="elem">Hidden</div>

<button class="toggle">Try it</button>
<div class="hidden"></div>

БЛОГ НА HUSL

Обернуть часть элементов в тег и открывать сокрытый блок по клику

Ответы (1 шт):