JS function is running twice

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>

Leave a Reply