How to remove a previously toggled class when we toggle another class by click event

Question

I dont use Jquery and dont want to , I wanted to toggle a class again once next item is toggled with same class. so the class from previous one is removed. and only one class is toggled on at a time.

I tried adding document.getElementsByClassName(".panel").removeClass("open"); to the function to first remove all toggled class('open') but that doesnt work. i tried adding an id and trying to remove a class from that id still doesn't work

function toggleOpen() {

     document.getElementsByClassName(".panel").removeClass("open");//this give me error
      this.classList.toggle('open');


    }
    function toggleActive(e) {
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }

    }



    const panels = document.querySelectorAll('.panel');
    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

Result

Uncaught TypeError: document.getElementsByClassName(...).removeClass is not a function

Related: [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/q/10693845/218196) — Felix Kling, Apr 14 '19 at 07:18

spd · Answer 1 · 2019-04-16T09:34:33.953

1

It should be classList.remove("open"), not removeClass("open")

Also, it wouldn't work because getElementsByClassName would return a collection of elements, and you can't remove the class from them all at once. You'd have to call it for each element in the panel.

Array.from(document.getElementsByClassName(".panel")).forEach(element => element.classList.remove("open"))

Or without turning it to an array first you can do

const panels = document.getElementsByClassName(".panel")
for (let panel of panels) {
  panel.classList.remove("open")
}

edited Apr 16 '19 at 09:34

answered Apr 14 '19 at 07:16

spd

23
1
3

```document.getElementsByClassName(".panel").forEach(element => element.classList.remove("open"))``` i get this error ```Uncaught TypeError: document.getElementsByClassName(...).forEach is not a function at HTMLDivElement.toggleOpen (index-START.html:157)``` – Faiz Hameed Apr 15 '19 at 08:51
Oh yes, you must turn it to an array to use `forEach` but you can do it normally with a for loop, so you must turn it to an array first `Array.from(document.getElementsByClassName(".panel")).forEach(element => element.classList.remove("open"))` – spd Apr 16 '19 at 09:32

score 1 · Answer 2 · answered Apr 14 '19 at 07:18

Since you are adding event listener to each element, document.getElementsByClassName(".panel").removeClass("open"); is not required. this inside the function will refer to clicked element.

removeClass is jquery method, which will not be available. document.getElementsByClassName returns list of elements, so you need to loop over it.

Try following example.

function toggleColor() {
      this.classList.toggle('red');
}


const panels = document.querySelectorAll('.panel');
panels.forEach(panel => panel.addEventListener('click', toggleColor));

.green {
  color: green;
}
.red {
  color: red;
}

<p class="panel green">H1<p>
<p class="panel red">H2<p>
<p class="panel green">H3<p>
<p class="panel  red">H4<p>

How to remove a previously toggled class when we toggle another class by click event

2 Answers2