Click a div to change/toggle class on an img-CodePudding

I am stuck with an issue regarding an icon I want to change, when I click on a div. I am trying to make an accordion element with an arrow icon (using Iconoir) that toggles between classes "iconoir-nav-arrow-right" to "iconoir-nav-arrow-down" every time I click on it.

It seems the icon is being added to the div via classList toggle, and not changing the class of the img with class "arrowAcc". Not sure how to use the function to target the img when clicking on div. Perhaps a kind soul here can help me, or point me to a ressource that explains. Thanks a lot in advance!

The code (js, css, html):

function toggleIconAcc(element) {
  element.classList.toggle("iconoir-nav-arrow-right");
  element.classList.toggle("iconoir-nav-arrow-down");
}

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i  ) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    var panelAccordion = this.nextElementSibling;
    if (panelAccordion.style.maxHeight) {
      panelAccordion.style.maxHeight = null;
    } else {
      panelAccordion.style.maxHeight = panelAccordion.scrollHeight   "px";
    }
  });
}

:root {
    --Lato: "Lato", sans-serif;
    --WorkSans: "Work Sans", sans-serif;
    --hover-color: #084f58;
    --third-color: #028090;
    --fourth-color: #D7FAFE;
    --text-color: #2e2e2e;
    --bggradient: #fffdf5;
    --bggradient2: linear-gradient(220.55deg, #665da1 0%, #418CB7 100%);
    --light-gray: rgba(255, 255, 255, 0.877)
}

#faq {
    display: flex;
    max-width: 55%;
    margin: auto;
    flex-direction: column;
    padding-top: 16vmin;
}

#faq h1 {
    text-align: center;
    color: var(--text-color);
    font-family: var(--WorkSans);
    font-weight: 300;
    font-size: 24px;
}

.accordion {
    display: flex;
    align-items: center;
    background-color: var(--fourth-color);
    color: var(--text-color);
    font-family: var(--WorkSans);
    cursor: pointer;
    border-radius: 8px;
    border: none;
    padding: 12px;
    width: 100%;
    height: 60px;
    text-align: left;
    transition: 0.25s;
    outline: none;
    margin-top: 4px;
}


.active,
.accordion:hover {
    background-color: var(--hover-color);
    color: #f3f3f3;
}

.panelAccordion {
    padding: 0 18px;
    font-size: 14px;
    background-color: var(--bggradient);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@master/css/iconoir.css">
</head>                        
                                                <div id="faq">
                            <h1>Frequently asked questions</h1>
                            <div onclick="toggleIconAcc(this)" >
                                <i ></i>
                                <h4>Lorem ipsum dolor sit amet, consectetur adipisicing?</h4>
                            </div>
                            <div >
                                <p >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe
                                    quia asperiores
                                    harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nobis
                                    enim voluptate fugiat officiis similique!
                                </p>
                            </div>
                            <div onclick="toggleIconAcc(this)" >
                                <i ></i>
                                <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum
                                    numquam atque enim?</h4>
                            </div>
                            <div >
                                <p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta
                                    fuga dolore fugiat itaque, a provident. Iste ea optio corporis nostrum, hic
                                    excepturi, ab veritatis iure consequatur sint saepe, distinctio blanditiis
                                    architecto dolorum deleniti.</p>
                            </div>
                            <div onclick="toggleIconAcc(this)" >
                                <i ></i>
                                <h4>Lorem ipsum dolor sit amet?</h4>
                            </div>
                            <div >
                                <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                    Repudiandae provident iusto quae? Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Earum tenetur id sapiente amet molestiae assumenda saepe perspiciatis quia quo
                                    deserunt aliquam nemo, aspernatur aperiam tempore excepturi commodi debitis autem
                                    esse! Eum, a.
                                    harum!</p>
                            </div>
                            <div onclick="toggleIconAcc(this)" >
                                <i ></i>
                                <h4>Lorem ipsum dolor sit amet?</h4>
                            </div>
                            <div >
                                <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                    Repudiandae provident iusto quae? Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Earum tenetur id sapiente amet molestiae assumenda saepe perspiciatis quia quo
                                    deserunt aliquam nemo, aspernatur aperiam tempore excepturi commodi debitis autem
                                    esse! Eum, a.
                                    harum!</p>
                            </div>
                            <div onclick="toggleIconAcc(this)" >
                                <i ></i>
                                <h4>Lorem ipsum dolor sit amet?</h4>
                            </div>
                            <div >
                                <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit.
                                    Repudiandae provident iusto quae? Lorem ipsum dolor sit amet consectetur adipisicing
                                    elit. Earum tenetur id sapiente amet molestiae assumenda saepe perspiciatis quia quo
                                    deserunt aliquam nemo, aspernatur aperiam tempore excepturi commodi debitis autem
                                    esse! Eum, a.
                                    harum!</p>
                            </div>
                        </div>

CodePudding user response：

I changed your javascript to not be inline but instead to use addEventListener.

One issue that you have in your code is you have TWO click handlers for the accordion element. One is in your javascript and the other is inline but they are being called on the same element.

Cleaning that up and using only one click handler will solve your problems.

Plus you want to toggle iconoir-nav-arrow-right on your icon not the accordion div. Which is what was happening on your inline javascript click handler.

var acc = document.querySelectorAll(".accordion");

acc.forEach(function(el) {
  el.addEventListener("click", function(e) {
    this.classList.toggle("active");
    let icon = this.querySelector("i");
    icon.classList.toggle("iconoir-nav-arrow-right");
    icon.classList.toggle("iconoir-nav-arrow-down");
    let panelAccordion = this.nextElementSibling;
    if (panelAccordion.style.maxHeight) {
      panelAccordion.style.maxHeight = null;
    } else {
      panelAccordion.style.maxHeight = panelAccordion.scrollHeight   "px";
    }
  });
});

:root {
  --Lato: "Lato", sans-serif;
  --WorkSans: "Work Sans", sans-serif;
  --hover-color: #084f58;
  --third-color: #028090;
  --fourth-color: #D7FAFE;
  --text-color: #2e2e2e;
  --bggradient: #fffdf5;
  --bggradient2: linear-gradient(220.55deg, #665da1 0%, #418CB7 100%);
  --light-gray: rgba(255, 255, 255, 0.877)
}

#faq {
  display: flex;
  max-width: 55%;
  margin: auto;
  flex-direction: column;
  padding-top: 16vmin;
}

#faq h1 {
  text-align: center;
  color: var(--text-color);
  font-family: var(--WorkSans);
  font-weight: 300;
  font-size: 24px;
}

.accordion {
  display: flex;
  align-items: center;
  background-color: var(--fourth-color);
  color: var(--text-color);
  font-family: var(--WorkSans);
  cursor: pointer;
  border-radius: 8px;
  border: none;
  padding: 12px;
  width: 100%;
  height: 60px;
  text-align: left;
  transition: 0.25s;
  outline: none;
  margin-top: 4px;
}

.active,
.accordion:hover {
  background-color: var(--hover-color);
  color: #f3f3f3;
}

.panelAccordion {
  padding: 0 18px;
  font-size: 14px;
  background-color: var(--bggradient);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@master/css/iconoir.css">
</head>
<div id="faq">
  <h1>Frequently asked questions</h1>
  <div >
    <i ></i>
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing?</h4>
  </div>
  <div >
    <p >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe quia asperiores harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nobis enim voluptate fugiat officiis similique!
    </p>
  </div>
  <div >
    <i ></i>
    <h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum numquam atque enim?</h4>
  </div>
  <div >
    <p >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta fuga dolore fugiat itaque, a provident. Iste ea optio corporis nostrum, hic excepturi, ab veritatis iure consequatur sint saepe, distinctio blanditiis architecto dolorum deleniti.</p>
  </div>
  <div >
    <i ></i>
    <h4>Lorem ipsum dolor sit amet?</h4>
  </div>
  <div >
    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae provident iusto quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum tenetur id sapiente amet molestiae assumenda saepe perspiciatis quia quo deserunt aliquam nemo,
      aspernatur aperiam tempore excepturi commodi debitis autem esse! Eum, a. harum!
    </p>
  </div>
  <div >
    <i ></i>
    <h4>Lorem ipsum dolor sit amet?</h4>
  </div>
  <div >
    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae provident iusto quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum tenetur id sapiente amet molestiae assumenda saepe perspiciatis quia quo deserunt aliquam nemo,
      aspernatur aperiam tempore excepturi commodi debitis autem esse! Eum, a. harum!
    </p>
  </div>
  <div >
    <i ></i>
    <h4>Lorem ipsum dolor sit amet?</h4>
  </div>
  <div >
    <p >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae provident iusto quae? Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum tenetur id sapiente amet molestiae assumenda saepe perspiciatis quia quo deserunt aliquam nemo,
      aspernatur aperiam tempore excepturi commodi debitis autem esse! Eum, a. harum!
    </p>
  </div>
</div>