I have a js function that should change the value of a html data attribute value based on the current value. So in other words it should act like a toggle between 0 and 1 onclick. Anyways as per logging the current state I have noticed that the state is logged twice times per click. I want that after checking and changing the current value the function should end.
const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));
accordionTabs.forEach(accordionTab => {
accordionTab.addEventListener('click', function checkTabState() {
let state = accordionTab.getAttribute('data-State');
console.log(state);
if ( state == "1" ) {
accordionTab.setAttribute("data-State", "0");
} else {
accordionTab.setAttribute("data-State", "1");
}
});
});#custom-faq-accordion {
display: flex;
justify-content: center;
align-items: center;
background-color: #FFF6E7;
padding: 60px 0 230px;
min-height: 75vh;
}
#custom-faq-accordion-wrapper {
width: 1200px;
}
#custom-faq-accordion-title {
padding-bottom: 60px;
}
.accordion input[name=panel] {
display: none;
}
.accordion label {
position: relative;
display: block;
padding: 0.2em 1em 0.5em 1.2em;
font-size: 1.5em;
color: black;
cursor: pointer;
transition: all 0.7s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion label::after {
font-family:"obviously-wide";
font-size: 39px;
content: "+";
position: absolute;
right: 1em;
width: 1em;
height: 1em;
color: #000;
text-align: center;
border-radius: 50%;
padding-bottom: 5px;
padding-right: 0.5em;
display: flex;
justify-content: center;
align-items: center;
bottom: 0.8em;
}
.accordion label:hover {
color: black;
}
.accordion input:checked + label {
color: black;
}
.accordion input:checked + label:after {
font-family:"obviously-wide";
font-size: 39px;
content: "-";
line-height: 0.8em;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
}
.accordion .accordion__content {
overflow: hidden;
height: 0px;
position: relative;
padding: 0 2.5em 0 3em;
color: black ;
transition: height 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}
.accordion .accordion__content .accordion__header {
padding: 1em 0;
}
.accordion .accordion__content .accordion__body {
font-size: 0.825em;
line-height: 1.4em;
}
/*
* Size Variations
*/
input[name=panel]:checked ~ .accordion__content.accordion__content--small {
height: auto;
padding-bottom: 30px;
padding-left: 7em;
width: 95%;
}
input[name=panel]:checked ~ .accordion__content.accordion__content--med {
height: auto;
}
input[name=panel]:checked ~ .accordion__content.accordion__content--large {
height: auto;
}
.custom-faq-accordion-button-wrapper {
position: relative;
width: 100%;
}
.border-black {
box-shadow: 0 0 0 1px #000;
border-collapse: seperate;
border-spacing: 10px;
border-radius: 59px;
background-color: #fff6e7;
margin-top: 5px;
margin-bottom: 25px;
position: relative;
z-index: 2;
will-change: transform;
}
.border-black:hover {
animation: pressin 0.3s forwards;
}
.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow.custom-faq-accordion-button-shadow {
position: absolute;
bottom: -6px;
height: 60px;
width: 100%;
border-radius: 110px;
background-color: #000;
z-index: 1;
display: block;
}
.border-black label {
font-family: vulfSans_bold;
color: black;
font-size: 20px;
line-height: 43px;
padding-top: 10px;
}
@keyframes pressin {
0% {transform: translateY(0px);}
100% {transform: translateY(6px);}
}<section id="custom-faq-accordion">
<div id="custom-faq-accordion-wrapper">
<h3 id="custom-faq-accordion-title" class="obviously-wide-black-90">FAQ</h3>
<div class="accordion">
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">
<div class="border-black">
<input type="checkbox" name="panel" id="panel-{{ block.settings.accordion_position }}">
<label for="panel-{{ block.settings.accordion_position }}">Titel</label>
<div class="accordion__content accordion__content--small">
<div class="accordion__body obviously-regular-25">lorem ipsum</div>
</div>
</div>
<div class="custom-faq-accordion-button-shadow"></div>
</div>
</div>
</div>
</section>>Solution :
your code works fine
Probably the problem is in another part of the code
const accordionTabs = Array.from(document.getElementsByClassName('custom-faq-accordion-button-wrapper'));
accordionTabs.forEach(accordionTab => {
accordionTab.addEventListener('click', e => {
const state = e.target.getAttribute('data-State');
const nextState = (Number(state) + 1) % 2
console.log({
state,
nextState
})
e.target.setAttribute("data-State", nextState);
});
});.custom-faq-accordion-button-wrapper {
cursor: pointer;
border: 1px solid black;
padding: 10px 5px;
margin-bottom: 5px;
}<div class="custom-faq-accordion-button-wrapper" data-State="0">1</div>
<div class="custom-faq-accordion-button-wrapper" data-State="0">2</div>