CSS: Error in Toggle Classes By using Class name

Question

i am trying to toggle classes by using class name. My code is working fine when i am toggling using id. how can i make it work only one red should be visible at one time.

function hideshowmenu() {
  var element = document.getElementsByClassName("box");
  element.classList.toggle("bg-red");
}

.bg-red {
  margin-top: 10px;
  background-color: red;
  height: 20px;
}

<div class="mainmenu " onclick="hideshowmenu()">RED1</div>
<div id="submenu" class="submenu">
  <div class="mainmenu " onclick="hideshowmenu()">RED2</div>
  <div id="box" class="box"> </div>
</div>

As an FYI: this is not the best way to create toggles nor lists. The element to click for the toggle should be focusable, which a div is not (by default). Something like a button or a are better options. Lists are better suited for ul or ol elements. — Bram Vanroy
– Bram Vanroy, Commented Oct 28, 2021 at 7:38
Spot the difference getElementsByClassName vs getElementById — Mihai T
– Mihai T, Commented Oct 28, 2021 at 7:41

Adrian Kokot · Accepted Answer · 2021-10-28 07:34:57Z

4

As the name of getElementsByClassName suggest, it returns elementS, so you are getting HTMLCollection, not one element. Query the first one, like this:

function hideshowmenu() {
  var element = document.getElementsByClassName("box")[0];
  element.classList.toggle("bg-red");
}

or:

function hideshowmenu() {
  var elements = document.getElementsByClassName("box");
  elements[0].classList.toggle("bg-red");
}

edited Oct 28, 2021 at 7:34

answered Oct 28, 2021 at 7:32

Adrian Kokot

3,6152 gold badges15 silver badges25 bronze badges

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

1 Comment

Fayakon Over a year ago

stackoverflow.com/questions/69750703/…

nightwolf555 · Accepted Answer · 2021-10-28 07:41:03Z

3

What is returned by document.getElementsByClassName("box"); is a collection. You need to specify the index to access the classList property.

You are doing:

var element = document.getElementsByClassName("box");
element.classList.toggle("bg-red");

When you should be doing

var element = document.getElementsByClassName("box");
element[0].classList.toggle("bg-red");

You could also loop through the elements if you want to toggle multiple values.

Example code fiddle https://jsfiddle.net/agy5jtb0/1/

answered Oct 28, 2021 at 7:41

nightwolf555

4863 silver badges21 bronze badges

Comments

Reza Mirzapour · Accepted Answer · 2021-10-28 07:46:03Z

2

getElementsByClassName("box") return a collection of elements, but you considered it as a single element that is your mistake. I suggest something like this:

html:

<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div>
<div id="submenu" class="submenu">
    <div class="mainmenu" onclick="hideshowmenu(this)">RED2</div>
    <div id="box" class="box"></div>
</div>

js:

function hideshowmenu(el) {
    el.classList.toggle("bg-red");
}

edited Oct 28, 2021 at 7:46

answered Oct 28, 2021 at 7:31

Reza Mirzapour

4534 silver badges12 bronze badges

Comments

MarQWeb · Accepted Answer · 2021-10-28 08:06:12Z

2

Check this (not sure If is this what you need):

function hideshowmenu() {
  var elements = document.getElementsByClassName("box");
  for (let a of elements) {
    a.classList.toggle("bg-red");
  }
}

.bg-red{
  margin-top:10px;
  background-color:red;
  height:20px;
}

<div class="mainmenu " onclick="hideshowmenu(this)">RED1</div>
<div id="submenu" class="submenu">
    <div class="mainmenu" onclick="hideshowmenu(this)">RED2</div>
    <div id="box" class="box"></div>
</div>

edited Oct 28, 2021 at 8:06

answered Oct 28, 2021 at 7:58

MarQWeb

212 bronze badges

Collectives™ on Stack Overflow

CSS: Error in Toggle Classes By using Class name

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related