Issue
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)" class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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)" class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum
numquam atque enim?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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)" class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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)" class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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)" class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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>
Solution
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 class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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 class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum numquam atque enim?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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 class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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 class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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 class="accordion">
<i class="iconoir-nav-arrow-right arrowAcc"></i>
<h4>Lorem ipsum dolor sit amet?</h4>
</div>
<div class="panelAccordion">
<p class="section-text">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>
Answered By - imvain2
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.