为什么我的可折叠按钮不折叠？

Question

I'd like to add to my (localhost) WordPress site a collapsible button with the following features:

• button width has not to be 100% but has to adapt to the text inside the button
• button can be inserted in a line of text without forcing the words after the button to go to the next line (I tried the plugin collapse-o-matic but the words after the button, even if they are written in the same line, are forced to go to the next line)

To better understand you can see this image

I was looking for how to manually (without plugins) create the button, and I ended up to a w3schools page where, using the online editor, I created the button I want (image above) whose code is the following

 var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }

 .collapsible { background-color: #777; color: white; cursor: pointer; border: none; } .ccontent { padding: 0 18px; max-height: 0; overflow: hidden; transition: .3s ease-out; background-color: #f1f1f1; box-shadow: 5px 5px 10px 3px inset rgba(0, 0, 0, 0.60); }

 Does <button class="collapsible">this</button> work? <div class="ccontent"> <p>Yes!</p> </div> Good job!

Next, I tried to figure out how to add the code to WordPress, so this is what I did

• added .collapsible and .content to the style.css file
• added the javascript to the footer using a plugin

then in a post I wrote the following code

Does <button class="collapsible">this</button> work?
<div class="ccontent"><p>Yes!</p></div>
Good job!

but, while the button is correctly showing, when clicking on it nothing happens. Since the button is showing, I think the problem has to do with the javascript code. This is what is shown in my post

as you can see another problem is the blank space between the first line and the second.

I'm almost sure that the javascript is loaded because when I open the page source (CTRL+U) I see that, some line before the </body> tag, the script is shown.

Answer 1

As shown here Uncaught TypeError: Cannot read property 'style' of null at HTMLButtonElement.<anonymous> to let the buttons work is enough to edit

var content = this.nextElementSibling;

in

var content = this.parentElement.nextElementSibling;

---

To remove the blank space is enough to place margin: -20px 0; inside the .ccontent CSS.