tal vez podría darme un consejo con otro problema, déjeme decirle cuáles son las suposiciones, quiero crear un script que, después de hacer clic en la flecha hacia abajo, muestre el contenido div, y luego la flecha cambiará a una que sugerirá que después de hacer clic con él, el contenido se ocultará, la flecha apuntando hacia arriba, hice un script que muestra contenido, también creé una función asignada al evento onClick, que cambia la clase de este icono a uno que muestra una flecha hacia arriba, entonces las flechas cambian bien, el único problema es que después de hacer clic en la flecha hacia arriba, el contenido no se oculta, no puedo fusionar la función que muestra el contenido con la función de cambiar la clase, porque la función que muestra el contenido usa el nombre de la clase, ¿puede indicarme una solución o qué tecnologías son las mejores para hacer algo como esto? Estaba intentando algunas formas, todas fallaron, ¡gracias por cualquier ayuda!
//js scripts(first one showing/hiding second one changeing class to change arrow icon) var div2_elements = document.querySelectorAll(".fa-angle-double-down"); var item2_elements = document.querySelectorAll(".describe"); for (var i = 0; i < div2_elements.length; i++) { div2_elements[i].addEventListener("click", function() { div2_elements.forEach(function(div) { div.classList.remove("active"); }); var div_value = this.getAttribute("data-Type"); item2_elements.forEach(function(item) { item.style.display = "none"; }); if (div_value == "test1") { document.querySelector("." + div_value).style.display = "block"; } else if (div_value == "test2") { document.querySelector("." + div_value).style.display = "block"; } else { console.log(""); } }); }; function myFunction(element) { if (element.className == "fas fa-angle-double-down") { element.className = "fas fa-angle-double-up"; } else { element.className = "fas fa-angle-double-down"; } } <div class="works-h"> <p1>titte1</p1><i onclick="myFunction(this)" data-Type="test1" class="fas fa-angle-double-down"></i><br> <div class="describe test1" style="display: none;">kontent1</div> <br><br> <p1>tittle2</p1><i onclick="myFunction(this)" data-Type="test2" class="fas fa-angle-double-down"></i><br> <div class="describe test2" style="display: none;">kontent2</div> </div>Puede dejar su HTML tal como está y reemplazar todo ese JS con esta función.
Primero, obtenemos el siguiente hermano del elemento en el que se hizo clic que es un DIV. Si actualmente está oculto, muéstralo y actualiza el icono de fontawesome. Si ya está visible, ocúltalo. Usando una función para alternar la visualización del DIV.
function myFunction(element){ d = document.evaluate("following-sibling::div", element, null, XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue if (d.style.display == "none"){ d.style.display = "block"; element.className = "fas fa-angle-double-up"; }else{ d.style.display = "none"; element.className = "fas fa-angle-double-down"; } }Simplifiqué la función para que ni siquiera necesite el atributo de tipo de datos o la "prueba" de clase en el DIV.