How to toggle div properties by clicking it?


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 class="container">
  {%for i, value in verb_data.items() %}
  <div class="indevidual_verbs">{{ i }} . {{ value }}</div><br>


.indevidual_verbs {
    cursor: pointer;

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


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
/* 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 */ .inner {
  display: block;
<div id="container">
  <div class="inner">
    This is just some example text

Answered By – Drago96

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.