giannit

@joyously Yes I already tried using details and summary but when I click on the details button the text surrounding it is moved down.
I asked about this few days ago.

Is it possibile to find the child .con even if it is not inside the .col?

I tried with this, but the console says that conte is undefined

( function() {
var coll = document.getElementsByClassName("col");
var cont = document.getElementsByClassName("con");
var i;

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

• This reply was modified 5 years, 2 months ago by giannit.

@joyously Thank you very much! There is another small problem, since somehwere in the text I have equations placed as images <img src...>, I noticed that if there are equations between .col and .con then the button doesn’t work anymore.
How can I edit the JS in order to let the button work in this case too?

@joyously I found the problem

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>

WP is inserting <p> tags, which are causing the problem. The first button is surrounded by p tags, so the .col and .con elements are no longer siblings, while the second button isn’t surrounded by p tags and so the elements are sibling.
All the buttons work if I remove parentElement from the JS and I manually (using chrome inspect tool) remove the paragraph tags that were automatically added by the WP editor.

So by placing this in the JS

var content = this.nextElementSibling;
if (!content) {
  content = this.parentElement.nextElementSibling;
}

both cases work.
Do you think is still a good idea to put the script inside a IIFE? If yes, how to do it?

• This reply was modified 5 years, 2 months ago by giannit.
• This reply was modified 5 years, 2 months ago by giannit.

@joyously Thank you for the support. The theme installed is underscore (downloaded from https://underscores.me/).

I have tried again and done the following:

• I copied the HTML from jsfiddle and pasted it in the Classic Editor (using the Classic Editor plugin)
• I changed the names of the classes, now they are long and surely unique

but still nothing happens when I click the button in the ul list.

Now I’m about to change the JS as you said, but I’m not sure, should I delete the 3 variables? How to it properly?

<script type="text/javascript">
( function() {
var coll = document.getElementsByClassName("classecol");
var i;

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

• This reply was modified 5 years, 2 months ago by giannit.
• This reply was modified 5 years, 2 months ago by giannit.

@joyously Thank you for the reply!

Is your HTML the same?

The only different thing is the <hr> line.

Did you put your script inside a IIFE so that your variables are not global

I’m not sure really sure about the IIFE thing, what I did is to put this script

<script type="text/javascript">
var coll = document.getElementsByClassName("col");
var i;

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

in the site footer (using the “Insert headers & footers” plugin).
Is it ok?

• This reply was modified 5 years, 2 months ago by giannit.

@bcworkz Thank you for the reply!

You need to add a break tag or non breaking space or something if you want to preserve a blank line

Are you talking about the div case only? Because if in the editor I write a word, then i press enter two times and then I write another word (3 lines total: word, empty, word), then the webpage will show the same 3 lines, right?

The div would need a different class to not have the extra margin.

Do you mean that I need to create another class, say new-line whose css will be something like margin-bottom: 0.5em and add it to the div (that is, write <div class="myclass new-line">) which I want to have an empty line below?

• This reply was modified 5 years, 2 months ago by giannit.

@hammadlari thanks I already tryed plugins but they don’t have such features

Using Toggle wpautop plugin is possibile to eliminate the spacing

Oh excuse me, could you move the topic from Fixing WP to Developing with WP?
I think it is a better place, isn’t it?
Thanks

EDIT: wrong message

• This reply was modified 5 years, 2 months ago by giannit.

@ronaldvw Thank you ronald! Do you know if, using your method, it is possibile to put two elements in the same line, like it is shown in this image?

@ronaldvw Thank you for support, I changed the first line as you said, but the error did not go away. I tried replacing the two dollar signs with jQuery, in this way

        jQuery(document).ready(function(){
            jQuery('.collapsible').click(function() {
                jQuery(this).next().slideToggle();
            }).next().hide();
        });

the errors are gone, but the button still doesn’t work as you can see from this video.

@ronaldvw Thank you very much! I’ve just solved the main problem, it was enought to edit the line
var content = this.nextElementSibling;
in
var content = this.parentElement.nextElementSibling;

Now I’m trying to remove the blank space.

Your solution is very interesting, I added the code to the functions.php file before the closing ?>, then I removed the css code about .collapsible and .ccontent, and finally refresh the post page, problem is that when the page is loaded the content is already showing and button cannot be pressed.

Moreover, in the console this error message appears
Uncaught TypeError: $ is not a function and it says the problem is at line $('.collapsible').click(function() {

Complete error message is

Uncaught TypeError: $ is not a function ?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190
    at HTMLDocument.<anonymous> (?preview_id=3389&preview_nonce=dd08c156ab&_thumbnail_id=-1&preview=true:190)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at Function.ready (jquery.js?ver=1.12.4-wp:2)
    at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)

• This reply was modified 5 years, 2 months ago by giannit.

@joyously Thank you for your kind answer and clarification.

If you want the text replaced everywhere, even if it changes your history, go for it.

I’d like to replace text not everywhere but only in the published post (and maybe in its last revision).
The problem in modifying only the published post is, I think, that when I go to compare the revisions (in order to restore an old one), wordpress will show the comparison between the last revision (which is different from the published post) and the previous revision. So it won’t be possible to compare the published post with the second last revision.
Is this what will happen?

Thank you @sterndata for the help. I will try to use your hints.
Is not possible to remove the keyword from the url?
For example, to have the url
https://localhost/sitename/search
independently from the keyword?

• This reply was modified 5 years, 5 months ago by giannit.