Using JavaScript with Gutenberg Button

Thanks for making the exception. I really appreciate.

Now I have 2 JavaScript Codes, but none seem to be working.

I got this one from a Tutorial Website:

function toggleBlock() {
    // get the block
    var myBlock = document.getElementById('service-area2');

    // get the current value of the block's display property
    var displaySetting = myBlock.style.display;

    // also get the block button, so we can change what it says
    var blockButton = document.getElementById('ShowMore');

    // now toggle the block and the button text, depending on current state
    if (displaySetting == 'block') {
      // block is visible. hide it
      myBlock.style.display = 'none';
      // change button text
      blockButton.innerHTML = 'Show Less';
    }
    else {
      // block is hidden. show it
      myBlock.style.display = 'block';
      // change button text
      blockButton.innerHTML = 'Show More';
    }
  }

And this one from Stack OverFlow:

function toggleBlock() {
    var myBlock = document.getElementById("service-area2");

    var blockButton = document.getElementById("ShowMore");

    if (myBlock.hidden) {
        blockButton.innerHTML = "Show Less";
        myBlock.hidden = false;
    } else {
        blockButton.innerHTML = "Show More";
        myBlock.hidden = true;
    }
}

I’ve created the HTML button on the WordPress Page here– https://treeremoval.ga/tree-service-ulmar/#ShowMore

You guys are expert Programmers. If it is you that wants to implement something like this, How would you write your Code?

Or seeing how far I’ve come, how can you help me rewrite my Code to make it fully functional?

Needing to here from you soon.

Regards

I will like to say Thank You to you. A very big Thank You indeed because when you said my Retrieval of the Button was wrong, I had a relook: and actually realized that this error was the bug in my Code.

By simply changing this Button ID, and using the Block ID instead of the CSS Class Name, the Code then worked fine.

Thanks for helping me know where to look.

Regards

I’m so sorry to bother you. I mean it, that I’m really sorry to bother you. But there’s still a small problem to fix–

Now, the button is working well. This is the final Code that worked:

function toggleBlock() {
    var myBlock = document.getElementById("service-area2");

    var blockButton = document.getElementById("ShowMore");

    if (myBlock.hidden) {
        blockButton.innerHTML = "Show Less";
        myBlock.hidden = false;
    } else {
        blockButton.innerHTML = "Show More";
        myBlock.hidden = true;
    }
}

The problem is that when the Page loads, the section that I want to hide on Page load is not hidden. Yet the button still says “Show More” instead of saying “Show Less“.

However, when I click the button after the page load, everything starts working well.

The problem is just that–on Page load, I expect a section to be hidden, and the button should say “Show More”.

And if I use CSS display:none Property to hide the section, the button doesn’t work again.

How do you think I can fix this? And make the flow to run as expected?

Regards