Quiero hacer una ventana que se expanda cuando se hace clic y se cierra cuando se vuelve a hacer clic. Estoy usando el matraz para mostrar todas las líneas de datos, pero eso no debería ser un problema y, de hecho, se puede ignorar. Ahora mismo tengo configurado que cuando haces clic en el div se expande, pero una vez que lo sueltas, el div se cierra de nuevo. ¿Hay alguna forma en que pueda convertir este div en un conmutador de algún tipo, muchos usando python o javascript o incluso CSS?
Frasco HTML/Python:
<div class="container"> {%for i, value in verb_data.items() %} <div class="indevidual_verbs">{{ i }} . {{ value }}</div><br> {%endfor%} </div>CSS:
.indevidual_verbs { cursor: pointer; } .indevidual_verbs:active { padding-bottom: 300px; }Dependiendo de lo que quieras hacer, incluso podrías usar el elemento html de detalles , que implementa automáticamente esa funcionalidad.
Si puede usar javascript, hay una manera de alternar fácilmente una clase:
// Get a reference to the container const container = document.getElementById("container"); // When we click on the container... container.addEventListener("click", function (e) { // we can toggle the "open" class this.classList.toggle("open"); }); /* Just a way to show the container */ #container { padding: 20px; border: solid 1px #000; } /* Hide the content (you can do it in many different ways) */ #container .inner { display: none; } /* Show the content when the "open" class is added to the container */ #container.open .inner { display: block; } <div id="container"> <div class="inner"> This is just some example text </div> </div>