0
180
ViewsCómo hacer un acordeón con HTML y JS
Quiero que se despliegue un acordeón cuando un usuario haga clic en el signo mayor que.
<div class="row"> <div class="col-2"> <p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1"></i></button></p> </div> <div class="col-3"> <P>Omodeko Divine</P> </div> <div class="col-2"> <p>EE</p> </div> <div class="col-3"> <p>[ETHIOPE EAST]</p> <P>DELSU HEALTH CENTER ABRAKA</P> </div> <div class="col-2"> <button class="btn btn-primary">GENERATE ID</button> </div> <div class="panel" onclick="document.getElementByclassname(panel).style.display='none'"> <p>No, but there must be adequate evidence that would help to support your claim.</p> </div> </div>este es el javascript
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("activee"); /* 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"; }});}Al hacer clic en el signo mayor que, se supone que el .panel se desplegará.
·
Juan Pablo Isaza
1 answers
Answer question0
- Agregue el evento onclick al ícono mayor que
- A continuación, agregue id a .panel div
- A continuación, en el script, escriba la lógica para ocultar y mostrar, consulte el fragmento de código a continuación
function showDropDown(){ const targetDiv = document.getElementById("panelDivId"); if (targetDiv.style.display !== "none") { targetDiv.style.display = "none"; } else { targetDiv.style.display = "block"; } } <div class="row"> <div class="col-2"> <p>DEP-08B827E791<button class="accordion"><i class="fa-solid fa-greater-than fa ps-1" onclick="showDropDown()">greaterThanIcon</i></button></p> </div> <div class="col-3"> <P>Omodeko Divine</P> </div> <div class="col-2"> <p>EE</p> </div> <div class="col-3"> <p>[ETHIOPE EAST]</p> <P>DELSU HEALTH CENTER ABRAKA</P> </div> <div class="col-2"> <button class="btn btn-primary">GENERATE ID</button> </div> <div class="panel" id="panelDivId" onclick="document.getElementByclassname(panel).style.display='none'"> <p>No, but there must be adequate evidence that would help to support your claim.</p> </div> </div>
·
Juan Pablo Isaza
Report
Answer question