this Keyword

[Kare 0]

I quoted this code from "How to" section's "Accordion" part. There are 2 "this" keywords here and i'm trying to understand what they are referring to and how they work. Could someone explain please?

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

for (i = 0; i < acc.length; i++) {
  acc.addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

[justsomeguy 1,112]

Inside the event handler, it refers to the element that fired the event.  So whatever element was clicked on.

[Kare 0]

var panel = this.nextElementSibling;

What about "nextElementSibling"? I looked at its description and it gives the <ul> <li> example. But what's next sibling does it choose here in the above code and how does it work? Could you help please?

[justsomeguy 1,112]

It gets the next sibling of the element.  I don't know what element that is because I haven't seen the elements, just the Javascript.  Siblings are elements with the same parent.