output as on wordpress

by Ascalon

HTML

<p>text<br>
text <button class="col">btn1</button> text <button class="col">btn2</button> text</p>
<div class="con nop">content1</div>
<div class="con nop_next">content2</div>
<p>text</p>

<p>text <button class="col">btn3</button> text <button class="col">btn4</button> text</p>
<div class="con nop_spaced">content3</div>
<div class="con">content4</div>

<p>text<br>
text <button class="col">btn5</button> text <button class="col">btn6</button> text</p>
<div class="con nop_spaced">content5</div>
<div class="con">content6</div>
<ul>
  <li>text</li>
  <li>text</li>
</ul>
<p>text</p>
<ul>
  <li>text</li>
  <li>text <button class="col">btn7</button> text <button class="col">btn8</button> text
    <div class="con">content7</div>
    <div class="con">content8</div></li>
  <li>text</li>
  <li>text <button class="col">btn9</button> text <button class="col">btn10</button> text
    <div class="con nop_ul">content9</div>
    <div class="con nop_next">content10</div>
    <p>text <button class="col">btn11</button> text <button class="col">btn12</button> text</p>
    <div class="con nop">content11</div>
    <div class="con nop_next">content12</div>
    <p>text <button class="col">btn13</button> text <button class="col">btn14</button> text</p>
    <div class="con nop_spaced">content13</div>
    <div class="con">content14</div></li>
  <li>text</li>
</ul>
<p>text</p>

CSS

.col { /* collapsible */
  outline: none;
  padding: 1px;
  font-size: 1em;
}
.con { /* content */
  padding: 0 1em;
  max-height: 0;
  overflow: hidden;
  background-color: red;
}
.nop { margin: -1em 0 -1em; }
.nop_next { margin: 1em 0 -1em; }
.nop_spaced { margin-top: -1em; }
.nop_ul { margin-bottom: -1em; }

JavaScript

( function() {
  coll = document.getElementsByClassName("col");
  conn = document.getElementsByClassName("con");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].setAttribute('data-id', 'con' + i);
    conn[i].setAttribute('id', 'con' + i);
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = document.getElementById(this.getAttribute('data-id'));
      if (content.style.maxHeight) {
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    });
  }
} )();