UPDATE: Choosing several classes and then toggling the classes independently for each one

Question

UPDATE: Choosing several classes and then toggling the classes independently for each one

I have managed to make this work, but I am considering if there is a more efficient solution. My objective is to modify the divs using classes exclusively.

I aim to toggle 4 classes with just one click.

First, I obtain the class for the button and then add a "click" event listener. Within the function, I select all 4 classes using querySelectorAll and assign them to a variable named slide.

 const slide = document.querySelectorAll('.header__btn, .wrap__content, .content__aside, .nav');

I understand that querySelector grabs elements in the order they appear in the HTML. I am only selecting elements that will remain constant.

My goal is to toggle a class list for each of these elements. What is the most efficient approach?

Currently, I am using:

slide[0].classList.toggle('header__btn--animate');
slide[1].classList.toggle('wrap__content--slide');
slide[2].classList.toggle('content__aside--slide');
slide[3].classList.toggle('nav--slide');

They toggle classes simultaneously, which is the desired behavior for me.

Is there a better method for achieving this?

Thank you

javascript arrays class toggle

Answer 1

Answer №1

To simplify the code, move the classes into an array containing pairs of [class to find, class to toggle]. Use Array.forEach() to iterate through the array. Use document.querySelectorAll() to get all items belonging to each class. Iterate through the items using NodeList.forEach(), and toggle the respective class for each item.

const classes = [['.header__btn', 'header__btn--animate'], ['.wrap__content', 'wrap__content--slide'], ['.content__aside', 'content__aside--slide'], ['.nav', 'nav--slide']]

btn.addEventListener('click', () => {
  classes.forEach(([cls, clsToggle]) => 
    document.querySelectorAll(cls)
      .forEach(el => el.classList.toggle(clsToggle))
  )
})

Answer 2

To simplify the code, move the classes into an array containing pairs of [class to find, class to toggle]. Use Array.forEach() to iterate through the array. Use document.querySelectorAll() to get all items belonging to each class. Iterate through the items using NodeList.forEach(), and toggle the respective class for each item.

const classes = [['.header__btn', 'header__btn--animate'], ['.wrap__content', 'wrap__content--slide'], ['.content__aside', 'content__aside--slide'], ['.nav', 'nav--slide']]

btn.addEventListener('click', () => {
  classes.forEach(([cls, clsToggle]) => 
    document.querySelectorAll(cls)
      .forEach(el => el.classList.toggle(clsToggle))
  )
})

UPDATE: Choosing several classes and then toggling the classes independently for each one

Answer №1

Similar questions

deleting the current product information during an ajax request

Enhance the styling of elements generated through JavaScript in VueJs with custom CSS

Arranging elements on top of a fixed element using JavaScript and CSS

What is the best way to dynamically alter HTML elements on my webpage?

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

unable to retrieve the value of the table row with a particular class designation

Pass a selected object to a dropdown/select change event using AngularJS

Proper Structure for Node System (BASIC)

Summing up numbers within a hierarchical table using jQuery

"Experiencing a problem with Next.js 13 where the User Context is not functioning properly outside of _app

Guide on how to pass the chosen dropdown value from a custom component back to the main component

An effortless method for generating a sequential Python array

Using NodeJS, pull JSON data from a JavaScript file and render it in a route file

Using Key Press to Rotate Messages - Jquery

What is the most efficient method for retrieving data upon form submission in Next.js?

The NUXT project encounters issues when trying to compile

I am trying to understand why my React component's render function is being called twice - first without any data and then again with data, resulting in a

React: Conceal additional elements once there are over three elements in each section

Using Angular UI Router to Access $scope Beyond the Scope of the UI View

Guide on combining vendor CSS files in a React application using Webpack