функция скрытия / раскрытия, которую можно использовать несколько раз на одной странице

Question

<div id="my-spoiler">
    <div id="my-spoiler-title" role="button" onclick="(document.getElementById('1').style.display=document.getElementById('1').style.display=='none' ? '' : 'none')">
        Spoiler Title
    </div>
    <div class="my-spoiler-content" id="1" style= "display:none">
        Hidden Content
    </div>
</div>

Чтобы использовать это несколько раз в сообщении, мне нужно каждый раз создавать уникальный "id", например, id=1, id=2 ....

Есть ли способвызовите child div без «id» и добейтесь результатов.

Примечание: изначально «контент» скрыт, а когда пользователь нажимает на заголовок, контент виден.

Я не знаюЯ не хочу использовать какие-либо плагины для этого.

Answer 1

На самом деле нет необходимости использовать javascript, это можно сделать исключительно с помощью CSS.

1. «Заголовок» - это метка для флажка (который скрыт). Нажатие на метку переключает свойство флажка «флажок».
2. Ввод помещается непосредственно перед тем содержимым, которое вы хотите скрыть / показать.
3. «Скрытый» контент скрыт с помощью css.
4. соседний братский комбинатор в сочетании с псевдоселектором :checked позволяет стилизовать «скрытый» контент , особенно при проверке ввода : input:checked + .spoiler-content

.spoiler {
  border: 1px solid #ccc;
}

.spoiler+.spoiler {
  margin-top: 20px;
}

.spoiler input[type="checkbox"] {
  display: none !important;
}

.spoiler-content {
  height: auto;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .5s;
}

input:checked+.spoiler-content {
  max-height: 1000px;
  opacity: 1;
}

<div class="spoiler">
  <label class="spoiler-title" for="spoiler-1">
        Spoiler Title
    </label>
  <input type="checkbox" id="spoiler-1">
  <div class="spoiler-content">
    Hidden Content
  </div>
</div>
<div class="spoiler">
  <label class="spoiler-title" for="spoiler-2">
        Spoiler Title #2
    </label>
  <input type="checkbox" id="spoiler-2">
  <div class="spoiler-content">
    Hidden Content #2
  </div>
</div>

ПРИМЕЧАНИЕ: «id» ввода и метки должны совпадать, но это будет тривиально, если создавать новые «id» с php и просто вводить их вВаша разметка легко:

<?php $spoiler_id = 'spoiler-' . rand(100000,99999999); ?>

Поскольку вы не поделились с нами ни одним из ваших кодов WordPress / PHP, мы не знаем, как вы добавляете это в свои посты, поэтому я не могу больше советоватьв частности, как ввести идентификатор.

Answer 2

var faqToggles = document.querySelectorAll('[rel="faq-toggle"]');

faqToggles.forEach( function(toggle) {
  toggle.addEventListener('click', function(event) {
    event.target.closest('.faq').classList.toggle('open');
  });
});

.faq {
  margin-top: 20px;
}

.faq .content {
  border: 1px solid blue;
}

.faq:not(.open) .content {
  padding: 0;
  height: 0;
  overflow: hidden;
  border: 1px solid red;
}

[rel='faq-toggle'] {
  /* this could be a button... maybe should be... */
  cursor: pointer;
}

<section class="faq">

  <header rel="faq-toggle">
    This is the header / teaser etc.
  </header>

  <main class="content">
    This is the full content.
  </main>

</section>

Конечно - StackOverflow - изменяет порядок кода (в обратном направлении) - но что-то вроде этого?

https://jsfiddle.net/sheriffderek/t32cqmwx/