How to toggle div properties by clicking it?-CodePudding

I want to make a window that expands when clicked and closes when clicked again. I am using flask to display all lines of data but that should not be a problem and can actually be ignored. Right now I have it set that when you click the div it expands but once you let go the div closes again. Is there any way I can turn this div into a toggle of some kind many using python or javascript or even CSS?

HTML/Python flask:

<div >
  {%for i, value in verb_data.items() %}
  <div >{{ i }} . {{ value }}</div><br>
  {%endfor%}
</div>

CSS:

.indevidual_verbs {
    cursor: pointer;
}

.indevidual_verbs:active {
    padding-bottom: 300px;
}

CodePudding user response：

Depending on what you want to do, you could even use the details html element, that automatically implements that functionality.

If you can use javascript, there is a way to easily toggle a class:

// 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 >
    This is just some example text
  </div>
</div>