How to add class via Javascript instead of work with css inside js code?

Question

I'm building a sidenav menu. I want to work on the style directly in the css file instead of the Javascript code as below.

For example: dropContent.style.display === "block" and "none", I wish there was a class to modify and not add css values inside the js code. Is this possible ?

References: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown

var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

  for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("activate");
  
  var dropContent = this.nextElementSibling;
  if (dropContent.style.display === "block") {
      dropContent.style.display = "none";
    } else {
      dropContent.style.display = "block";
    }
  });
}

classList.add('class-name')? But I guess you want classList.toggle('class-name') so you dont need an if/else-statement — tacoshy
– tacoshy, Commented May 21, 2022 at 19:14

Joe Herbert · Accepted Answer · 2022-05-21 19:17:54Z

2

In your CSS:

.hidden {
  display: none;
}

In your JS:

if (element.classList.contains("hidden")) {
  element.classList.remove("hidden");
} else {
  element.classList.add("hidden");
}

Make sure your element has the display property block to start with and I believe this should give you what you want.

Edit: As @tacoshy points out, there's the toggle function, which is much clearer:

element.classList.toggle("hidden");

edited May 21, 2022 at 19:17

answered May 21, 2022 at 19:16

Joe Herbert

4621 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

tacoshy Over a year ago

just use toggle instead of an if/else-statement

Joe Herbert Over a year ago

@tacoshy good point, that's a neat function I didn't know about. Answer updated

Snorlax Over a year ago

I deleted else and added element.classList.toggle ("hidden"); but it's not working. Instead it works fine as suggested by @JoeHerbert in the first example.

Joe Herbert Over a year ago

@Snorlax they should both work. Note the toggle line replaces the whole JS code I posted, not just the else section.

Snorlax Over a year ago

@JoeHerbert Sorry, I did it differently and I realized I was wrong. Now it works: var element = this.nextElementSibling; element.classList.toggle ("hidden");

Collectives™ on Stack Overflow

How to add class via Javascript instead of work with css inside js code?

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related