How to Remove Event Listener from Function

I am utilizing the accordion build from W3 Schools. It works great, but I would like to clean things up a bit by creating a function for this in my JS file (rather than inline <script> tags). The problem is that I need to tweak it a little by removing the event listener, but I have had little luck (still learning JS). How Can I achieve this?

Below is what I want to do, but need to remove the event listener because it makes the user have to double click in order to activate the accordion.

HTML:

<button class="accordion" onclick="faqsAccordion()">Section 1</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

JS

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

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

27 thoughts on “How to Remove Event Listener from Function”

Leave a Comment