Question 101580 in Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Trigger .click() on a link on mobile view only

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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%20is%20not%20a%20function,you%20have%20written%20a%20document.

    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();
  }
}

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search