2

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

enter image description hereenter image description here


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;

  • 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 Sep 12 '19 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 Sep 12 '19 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 Sep 12 '19 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 Sep 12 '19 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 Sep 13 '19 at 12:28
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.