Trigger .click() on a link on mobile view only-CodePudding

So I'm currently working on a WordPress website with a Table of Contents plugin. All the plugin do is just detect headings and add them to its contents.

What I am trying to achieve on my current website (https://staging.vladesplana.com/planning-center-vlad-test) is that when the Window is at <= 768px, it should simulate a "click" event on the [ Collapse ] anchor link so that the Contents will be hidden on mobile load and only be Expanded when on Desktop pixels (1280px, etc) load

function tocToggle2() {
    if (window.innerWidth <= 768) {
          document.getElementsByClassName('lwptoc_toggle_label').click();
  }
}

window.onload = tocToggle2;

May I know your thoughts or the proper code for this? I mainly just build websites on Elementor and know only basic Javascript.

Tried a few things as well from my searches and on Stack to no avail.

I use Custom CSS & JS plugin to insert CSS and JS codes into my WordPress website so please, no JQueries

EDIT: Corrected some of the codes.

CodePudding user response：

Oh I think I got it.

I just added [0] on this line: document.getElementsByClassName('lwptoc_toggle_label')[0].click();

Source: https://www.geeksforgeeks.org/click-method-not-working-and-console-returns-an-error-message-in-javascript/#:~:text=click is not a function,you have written a document.

Since it says there: If you spelled it correctly then probably this error arises because you are not aware that document.getElementsByClassName returns an array of elements, not a single element. In order to avoid the error, you need to access a single element and then perform a click().

I checked in the console as well to check if the function is working as intended but it throws an error there.

final code:

function tocToggle2() {
    if (window.innerWidth <= 768) {
          document.getElementsByClassName('lwptoc_toggle_label')[0].click();
  }
}

CodePudding user response：

Instead of using getElementsByClassName, which will give you a list with every matching element, use querySelector, which will return the first one it finds.

The reason your code isn’t working is because you can’t trigger a click on a list of nodes.