Tengo el siguiente código
// Fetch all the details element. const details = document.querySelectorAll('details'); // Add the onclick listeners. details.forEach((targetDetail) => { targetDetail.addEventListener('click', () => { // Close all the details that are not targetDetail. details.forEach((detail) => { if (detail !== targetDetail) { detail.removeAttribute('open'); }; // change menu items and menu collapse icons const icon = document.querySelector('.arrow i'); if (icon.classList.contains('fa-chevron-down')) { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-up'); } else { icon.classList.remove('fa-chevron-up'); icon.classList.add('fa-chevron-down'); } }); }); }); details > summary { cursor: pointer; list-style: none; } details > summary::-webkit-details-marker { display: none; } details { transition: all 0.2s ease-in-out; } details[open] { display: block; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" rel="stylesheet"/> <aside class="sidebar"> <details> <summary> <i class="fas fa-users"></i> <span class="text hidden">Users</span> <span class="arrow"> <i class="fas fa-chevron-down"></i> </span> </summary> <div> <a href="/dashboard/users/{{user._id}}">My profile</a> </div> <div> <a href="/dashboard/users/edit/{{user._id}}">Edit Profile</a> </div> </details> <details> <summary> <i class="fas fa-life-ring"></i> <span class="text hidden">Support</span> <span class="arrow"> <i class="fas fa-chevron-down"></i> </span> </summary> <div> <a href="#">Tickets</a> </div> </details> </aside>Cuando el usuario hace clic en un menú desplegable de detalles, quiero que el ícono cambie a cheurón hacia arriba, pero esto también debería suceder si hago clic en el segundo y debería restablecer el ícono de detalles anterior a cheurón hacia abajo.
Así que quiero recorrer todos los detalles, ya que voy a tener el mismo ícono, funcionalidad para todos los menús desplegables.
Cualquier ayuda sería genial.