What's the best way to access all elements rather than just the initial one?

Question

What's the best way to access all elements rather than just the initial one?

I'm currently working on implementing an accordion-style FAQ sheet, but I'm facing some issues. Right now, I can only get the first element to display the hidden content. Below is the JavaScript code I am using:

var arrowIcon = document.querySelector('.arrow-icon');
var hidden = document.querySelector('.hidden');

var answer = 'answer';

arrowIcon.addEventListener('click', function() {
  if (answer === 'hidden') {
    answer = 'answer';
    hidden.setAttribute('class', 'answer');
  }
  else {
    answer = 'hidden';
    hidden.setAttribute('class', 'hidden');
  }
});

javascript

Answer 1

Answer №1

To successfully add click listeners to multiple elements, you can utilize the querySelectorAll method and then loop through each element using a forEach function. It's important to note that querySelectorAll returns a nodeList rather than an array, so if you need to perform array operations, you will need to convert it into an array first.

Here's an example of how you can achieve this:

var arrowIcons = Array.from(document.querySelectorAll('.arrow-icon'));

arrowIcons.forEach(element => {
    element.addEventListener("click", (event) => {
        // Your custom code goes here
    });
});

Answer 2

To successfully add click listeners to multiple elements, you can utilize the querySelectorAll method and then loop through each element using a forEach function. It's important to note that querySelectorAll returns a nodeList rather than an array, so if you need to perform array operations, you will need to convert it into an array first.

Here's an example of how you can achieve this:

var arrowIcons = Array.from(document.querySelectorAll('.arrow-icon'));

arrowIcons.forEach(element => {
    element.addEventListener("click", (event) => {
        // Your custom code goes here
    });
});

What's the best way to access all elements rather than just the initial one?

Answer №1

Similar questions

Creating a Next.JS Link that opens a new tab for internal URLs while avoiding redirection to external URLs

Exploring the possibilities of custom layouts for specific routes within the pages directory in Next.js

Unable to locate the accurate information

When utilizing a JQuery plugin for sliders, Dart does not function in the same way that traditional JavaScript does

Guide to centering a Material UI Table on a webpage

Keep the color of the clicked link consistent

Exploring the incorporation of the elasticsearch javascript library within your Aurelia application

What is the best approach to managing a 204 status in Typescript in conjunction with the Fetch API

An effective way to determine the size of a browser through javascript

The sequence in which jQuery's bind() function is executed

Display/Conceal the UL subelement when selected

Uncertainty arises when trying to understand the callback function supplied to the `addEventListener` method in JavaScript

Updating the dynamic site script to be compatible with the newest version of the jQuery library

How to pass only the clicked element to the onClick function in React.js

Bootstrap 4 carousel rotation technique

Modify the icon in the header of MaterializeCSS Collapsible when it is opened

Unwrapping Promises in Angular for Seamless Resolution

What measures can I take to restrict users from adding names that are already in the system?

Exploring the depths of a JSON data structure

Can WebDriver (HtmlUnit, Ruby bindings) be configured to bypass JavaScript exceptions?