Jump to content

this Keyword


Recommended Posts

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 */


    /* 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";

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...