Kare Posted June 4, 2019 Share Posted June 4, 2019 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"; } });} Link to comment Share on other sites More sharing options...
justsomeguy Posted June 4, 2019 Share Posted June 4, 2019 Inside the event handler, it refers to the element that fired the event. So whatever element was clicked on. Link to comment Share on other sites More sharing options...
Kare Posted June 5, 2019 Author Share Posted June 5, 2019 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 More sharing options...
justsomeguy Posted June 5, 2019 Share Posted June 5, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now