How to toggle between two classes on li elements which have arrows? (just JavaScript and CSS)

Question

I want to toggle between up and down arrow classes, if li is not opened then arrow down should be visible, and if it's li open a list, then arrow should be up. I want this to works on each li element which have possibility to be opened.

let ul = document.getElementById("nav");
let liArray = ul.getElementsByTagName("li");

liArray.addEventListener('click', function() {
  for (let i = 0; i < liArray.length; i++) {
    liArray[i].classList.add('fa-chevron-up');

  }
})

.fa-chevron-down {
  display: block;
  float: right;
  font-size: 20px;
  text-align: right;
}

.fa-chevron-up {
  display: block;
  float: right;
  font-size: 20px;
  text-align: right;
}

<ul id="nav">
  <li><a href="#">BEST BONUSES</a></li>
  <li><a href="#" id="with-arrow">ONLINE CASINOS<i class="fas fa-chevron-down" id="hide"></i><i id="show" class="fas fa-chevron-up"></i></a>
    <ul>
      <li><a href="#">Casinos Listing</a></li>
      <li><a href="#">Casinos by Province<i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i></a>
        <ul>
          <li><a href="#">Western Cape</a>
            <li><a href="#">Gauteng</a>
        </ul>
        </li>
        <li><a href="#">ZAR Online Casinos</a></li>
        <li><a href="#">Reviews</a></li>
        <li><a href="#">Software<i class="fas fa-chevron-down"></i></a></li>
        <li><a href="#">Land-Based Casino Resorts</a></li>
    </ul>
    </li>
    <li><a href="#">ZAR BANKING<i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i></a></li>
    <li><a href="#">GAMES<i class="fas fa-chevron-down"></i><i class="fas fa-chevron-up"></i></a></li>
    <li><a href="#">BEST BONUSES</a></li>
    <li><a href="#">NEWS</a></li>
</ul>

You have an issue here: `liArray.addEventListener`. `liArray` is a *collection* of HTML elements not a single element, therefore you have to loop through it in order to add an event listener to each item: `liArray.forEach(item => item.addEventListener(/* ... */))` — secan, Feb 04 '21 at 10:05

score 0 · Answer 1 · edited Feb 14 '21 at 23:15

0

You're trying to add the event listeners to the entire array, as opposed to the individual elements, try something like

let ul = document.getElementById("nav");
let liArray = ul.getElementsByTagName("li");
liArray.forEach(item => item.addEventListener('click' ,function 
(e){
  e.target.classList.add('fa-chevron-up');

}))

edited Feb 14 '21 at 23:15

Martijn Pieters

1,048,767
296
4,058
3,343

answered Feb 04 '21 at 10:08

B''H Bi'ezras -- Boruch Hashem

3,665
3
33
83

I am getting an error like liArray is not function. and i want to toggle them, not just to add. – Pavle Ilic Feb 04 '21 at 12:39

score 0 · Answer 2 · answered Feb 04 '21 at 10:13

You can check if its class list contains the fa-chevron-up when yes then remove it and add the down class. The same vice versa if it contains fa-chevron-down

Also Note: you can not call eventlistener on a collection You should loop through the elements and assign to each element an eventlistener.

let ul = document.getElementById("nav");
let liArray = [...ul.getElementsByTagName("li")];

liArray.forEach((x) => {
  x.addEventListener('click', function() {
    if (this.classList.contains("fa-chevron-up")) {
        this.classList.remove("fa-chevron-up");
        this.classList.add("fa-chevron-down")
      } else if (this.classList.contains("fa-chevron-down")) {
        this.classList.remove("fa-chevron-down");
        this.classList.add("fa-chevron-up")
      }
    })
})

Thanks for you answer, but this don't work yet. Maybe because of CSS, i see both arrows. — Pavle Ilic, Feb 04 '21 at 12:40

How to toggle between two classes on li elements which have arrows? (just JavaScript and CSS)

2 Answers2