I implemented a collapsible button, it works well in WP, but if I insert it in a ul list it doesn't work, that is the button does not open.

Then I tried to run the code in jsfiddle and there it does work.

The only difference between the WP code and the jsfiddle code is in the javascript

• on WP the var content is defined by this.parentElement.nextElementSibling;
• on jsfiddle the var content is defined by this.nextElementSibling;

This is due to the fact that

• by removing parentElement on WP the button will break
• by adding parentElement on jsfiddle the button will break

Just for information, the javascript on WP is loaded in the footer.

Is it possibile to fix the problem? Here is the jsfiddle demo.

Below you can see jsfiddle vs WP

HTML FROM CHROME INSPECT TOOL

<div class="entry-content">
        <p>Does <button class="col">this</button> work?</p>
<div class="con space" style="">
<p>Yes!</p>
<p></p></div>
<hr>
<ul>
<li>Does <button class="col">this</button> work?
<div class="con space">
<p>Only in jsfiddle, not in WP!</p>
</div>
</li>
<li style="">another line</li>
</ul>
    </div>

HTML FROM WP CLASSIC EDITOR

Does <button class=col>this</button> work?
<div class="con space"><p>Yes!<p/></div>

<hr>

<ul>
  <li>Does <button class=col>this</button> work?
      <div class="con space"><p>Only in jsfiddle, not in WP!</p></div></li>
  <li>another line</li>
</ul>

The space class just contains margin-bottom: 1.5em;

I implemented a collapsible button, it works well in WP, but if I insert it in a ul list it doesn't work, that is the button does not open.

Then I tried to run the code in jsfiddle and there it does work.

The only difference between the WP code and the jsfiddle code is in the javascript

• on WP the var content is defined by this.parentElement.nextElementSibling;
• on jsfiddle the var content is defined by this.nextElementSibling;

This is due to the fact that

• by removing parentElement on WP the button will break
• by adding parentElement on jsfiddle the button will break

Just for information, the javascript on WP is loaded in the footer.

Is it possibile to fix the problem? Here is the jsfiddle demo.

Below you can see jsfiddle vs WP

HTML FROM CHROME INSPECT TOOL

<div class="entry-content">
        <p>Does <button class="col">this</button> work?</p>
<div class="con space" style="">
<p>Yes!</p>
<p></p></div>
<hr>
<ul>
<li>Does <button class="col">this</button> work?
<div class="con space">
<p>Only in jsfiddle, not in WP!</p>
</div>
</li>
<li style="">another line</li>
</ul>
    </div>

HTML FROM WP CLASSIC EDITOR

Does <button class=col>this</button> work?
<div class="con space"><p>Yes!<p/></div>

<hr>

<ul>
  <li>Does <button class=col>this</button> work?
      <div class="con space"><p>Only in jsfiddle, not in WP!</p></div></li>
  <li>another line</li>
</ul>

The space class just contains margin-bottom: 1.5em;

• css
• javascript

• 1 Is the WP output slightly different? If parentElement is necessary, it sounds like there must be some extra markup when it's output. Any chance we could see the exact HTML from WP (not from the template file, but what is being output to the screen)? – Steven Commented Sep 12, 2019 at 19:56
• The spacing in the output is slightly different because I have customized the ul spacing in the style.css and other minor things. Now I post the HTML I get from the chrome inspector, is this what you meant? About the JS, another user suggested me to turn the JS into an IIFE cose, but I don't know how to do it. – sound wave Commented Sep 12, 2019 at 20:01
• 1 Thanks for the update. WP is inserting <p> tags, which are causing the problem. I copied your code from JSFiddle to a WP install, and without adding parentElement it worked perfectly, as long as I manually removed the paragraph tags that were automatically added by the WP editor. If those paragraph tags are in there, the .col and .con elements are no longer siblings, which is why it breaks. – Steven Commented Sep 12, 2019 at 22:31
• 1 Or you could do something like this to accommodate both: var content = this.nextElementSibling; if (!content) { content = this.parentElement.nextElementSibling; } – Steven Commented Sep 12, 2019 at 22:50
• 1 This is nasty, but I'm brain dead: 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"; } }); } – Steven Commented Sep 13, 2019 at 12:28

1 Answer 1

Solution provided by Steven

<script type="text/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";
            }
        });
    }
} )();
</script>