Не понимаю, как сделать событие на python django

Делаю сайт на Django, перерыл весь интернет, но не понял, как сделать так, чтобы при нажатии кнопки выезжал блок html

<sidebar>
    <div id="second"></div>
    <button id="first">
        <svg id="right" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
        </svg>
    </button>

css

#second {
    background-color: blue;
    height: 100vh;
    width: 46%;
    float: left;
    position: fixed;
    left: -46%
}
#right{
     width: 100%;
     height: 100%;
     position: relative;
}
#first {
    background-color: black;
    height: 100vh;
    width: 4%;
    position: fixed;
    color: white;
    border: none;
}

Добавляете ивент лиснер на клик на Вашу кнопку с id first EventTarget.addEventListener(). И по клику просто делаете toggle класса на элементе с id second, здесь для примера я добавил css класс с названием active, который просто меняет позицию элемента.

const second = document.getElementById('second');
document.getElementById('first').addEventListener('click', () => {
  second.classList.toggle('active');
});
#second {
    background-color: blue;
    height: 100vh;
    width: 46%;
    float: left;
    position: fixed;
    left: -46%
}
#right{
     width: 100%;
     height: 100%;
     position: relative;
}
#first {
    background-color: black;
    height: 100vh;
    width: 4%;
    position: fixed;
    color: white;
    border: none;
}

.active {
  left: 0% !important;
}
<sidebar>
  <div id="second"></div>
  <button id="first">
      <svg id="right" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
      </svg>
  </button>
</sidebar>

Вариант с использованием CSS.

.sliding-block {
  display: block;
  min-width: 100px;
  width: 400px;
  max-width: 100vw;
  height: 100vh;
  background: gray;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  z-index: 9990;
  transition: transform .5s ease-in;
}

.sliding-block__check {
  display: none;
}

.sliding-block__button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 100%;
  background: #000;
  position: absolute;
  left: 100%;
  top: 0;
  cursor: pointer;
}

.sliding-block__button > svg {
  width: 16px;
  fill: #fff;
  transition: transform .5s ease-in;
}

.sliding-block__check:checked + .sliding-block {
  transform: translateX(0);
}

.sliding-block__check:checked + .sliding-block .sliding-block__button > svg {
  transform: rotateY(180deg);
}
<input id="sliding_1" type="checkbox" class="sliding-block__check">
<div class="sliding-block">
  <div class="sliding-block__content">

  </div>
  <label for="sliding_1" class="sliding-block__button">
    <svg id="right" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
    </svg>
  </label>
</div>

Вернуться на верх