Activate a .click() event on a hyperlink exclusively in mobile view

Question

Activate a .click() event on a hyperlink exclusively in mobile view

Currently, I am working on a WordPress website that utilizes a Table of Contents plugin. The plugin simply identifies headings and adds them to the table of contents.

I am aiming to achieve a specific functionality on my website (). When the window width is at or below 768px, I want to trigger a "click" event on the [ Collapse ] anchor link to hide the contents upon loading on mobile, and only expand them when loaded on desktop pixels (1280px, etc).

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

window.onload = tocToggle2;

I would appreciate any insights or guidance on the correct code for this. My expertise lies in building websites on Elementor and my knowledge of JavaScript is basic.

I have attempted various approaches based on my research and browsing through Stack Overflow without success.

For adding CSS and JS codes into my WordPress website, I use the Custom CSS & JS plugin, so please refrain from suggesting JQuery solutions.

EDIT: Made some corrections to the provided codes.

javascript html css

Answer 1

Answer №1

Aha, I believe I have figured it out.

I made a simple addition by placing [0] on this line:

document.getElementsByClassName('lwptoc_toggle_label')[0].click();

Reference: 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.

According to the information provided there: If you've spelled everything correctly, chances are this error occurs because document.getElementsByClassName returns an array of elements, not just one. To prevent the error, you must target a single element and then trigger a click().

To confirm if the function is functioning properly, I also inspected the console but encountered an error message.

The revised code snippet is as follows:

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

Answer 2

Aha, I believe I have figured it out.

I made a simple addition by placing [0] on this line:

document.getElementsByClassName('lwptoc_toggle_label')[0].click();

Reference: 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.

According to the information provided there: If you've spelled everything correctly, chances are this error occurs because document.getElementsByClassName returns an array of elements, not just one. To prevent the error, you must target a single element and then trigger a click().

To confirm if the function is functioning properly, I also inspected the console but encountered an error message.

The revised code snippet is as follows:

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

Answer 3

Answer №2

To avoid fetching a list of all matching elements with getElementsByClassName, try using querySelector instead. This method will return the first element it finds.

The issue with your code not functioning properly is due to the inability to initiate a click event on a collection of nodes.

Answer 4

To avoid fetching a list of all matching elements with getElementsByClassName, try using querySelector instead. This method will return the first element it finds.

The issue with your code not functioning properly is due to the inability to initiate a click event on a collection of nodes.

Activate a .click() event on a hyperlink exclusively in mobile view

Answer №1

Answer №2

Similar questions

Different ways to change the value of a variable in an isolated scope using another directive

What could be causing the issue with the functionality of third-level nested SortableJS drag-and-drop?

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

Using Laravel to set cookies with Ajax

What is the best way to save the content of an RFC822 message body as a String?

Is there a way to restore a minimized min.css file?

What could be causing Jquery's $.ajax to trigger all status codes even when the call is successful?

Having trouble utilizing the data obtained from an API, encountering errors such as 'data is undefined' leading to nothing displaying on the screen, or 'data.map() is undefined'

Unseen components and columns with Bootstrap 4

Having trouble extending my navbar to the full height of the window

Please input new items by clicking a button

The file upload process did not return a successful response for Ajax

Issues with @font-face and @font-family not being recognized

Implementing Text Box Control Validation within a Gridview using UpdatePanel in c# ASP.Net

Tips for creating a div that covers the entire screen and prevents it from resizing

Is there a method available to define a custom auto-generated key when inserting an object into Firebase Realtime Database?

Dealing with Challenges in Constructing JQuery URLs

Tips on accessing real-time data from a JSON file

Curious about the method of refining a list based on another list?

Combine multiple jQuery click functions into a single function