another option besides the nextElementSibling

Question

another option besides the nextElementSibling

I have a unique code that applies a style to the following div when another div is clicked, using nextElementSibling.

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    console.log(panel)
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

<div class="accordion">
  <p>Resources</p>
</div>
<div class=panel ">
 Test message
</div>

This triggers a style change on the div with the class panel. I want to move the class accordion from the div to the p tag.

Here's how it should look:

<div>
  <p class="accordion">Resources</p> 
</div>
<div class= panel">
  Test message
</div>

Now that accordion is no longer next to panel, how can I target the panel?

javascript html jquery css

Answer 1

Answer №1

When the p element becomes a child of the div that is a sibling to .panel, you can utilize the parentElement method to navigate back to that level in the DOM before using nextElementSibling. Here's how it can be done:

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.parentElement.nextElementSibling;
    
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.panel { display: none; }
.active { color: #C00; }

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

It's worth mentioning that if support for IE is not needed, there are more modern techniques available to achieve the same JavaScript functionality in a more concise way:

document.querySelectorAll('.accordion').forEach(el => {
  el.addEventListener('click', e => {
    let accordion = e.target;
    accordion.classList.toggle('active');
    accordion.parentElement.nextElementSibling.classList.toggle('show');
  });
});

.panel { display: none; }
.panel.show { display: block; }
.active { color: #C00; }

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

Answer 2

When the p element becomes a child of the div that is a sibling to .panel, you can utilize the parentElement method to navigate back to that level in the DOM before using nextElementSibling. Here's how it can be done:

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.parentElement.nextElementSibling;
    
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.panel { display: none; }
.active { color: #C00; }

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

It's worth mentioning that if support for IE is not needed, there are more modern techniques available to achieve the same JavaScript functionality in a more concise way:

document.querySelectorAll('.accordion').forEach(el => {
  el.addEventListener('click', e => {
    let accordion = e.target;
    accordion.classList.toggle('active');
    accordion.parentElement.nextElementSibling.classList.toggle('show');
  });
});

.panel { display: none; }
.panel.show { display: block; }
.active { color: #C00; }

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

another option besides the nextElementSibling

Answer №1

Similar questions

Encountering an issue in React: Uncaught ReferenceError - require function not recognized

Is it possible to retrieve the selected DataList object in Angular 10?

Container struggling to contain overflowing grid content items

What is the best way to simulate fetch in Redux Async Actions?

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Eliminate the presence of core-js in the nextjs bundle

Html5 declares that the statuses of values are not defined

Tips for integrating angular signature functionality using fabricjs in the latest version of Angular (Angular 11)

Stylish popup image with a link to an external source

What is the best method to retrieve text from a <span> element within an <li> element nested inside a <ul> using BeautifulSoup?

An effective way to verify if a record has been successfully updated is by utilizing Sequelize's

What steps do I need to take to integrate the turn.js JavaScript library with a Vue.js and Laravel project?

Error encountered while building with Next.js using TypeScript: SyntaxError - Unexpected token 'export' in data export

Limit Content to be contained within a Bootstrap Container/Div

"The interconnection between NetBeans, jQuery, and AJAX is

The combination of Heroku (Cedar) with Node, Express, and Jade is causing issues with the client-side javascript files in a subdirectory. While they work fine locally with foreman and

How to dynamically display a div in Vue.js depending on the attributes of another element

How come executing a function in the Node.js REPL using )( actually functions?

Oops! The Route.post() function is looking for a callback function, but instead, it received an [object Object

Implementing nested popup windows using Bootstrap