Javascript 用于扩展信息框的传单事件侦听器

我有一张带有GeoJSON点图层的简单传单地图。 我想要一个信息框而不是常规的弹出窗口，因此，在HTML中，我创建了以下内容：

<div id="panoutitlu" class="info-container" style="z-index: 601">
   <div class="info-title">
      <h1>Selectați ceva</h1>
  </div>
  <div class="info-body" id="corp">
   <div class="info-content-container">
    <div class="info-content" id="panoutext"></div>
 </div>
 </div>
</div>

我无法开始工作的是如何在单击

info title

时展开div，类似于。我想重现准确的行为，包括平滑过渡。这就是为什么我从中提取CSS并更改了一些大小和字体：

.info-title {
 height: 80px;
 font-family: 'Fira Sans Condensed';
 font-size: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 cursor: pointer;
 user-select: none;
 color: #FFF;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 }

.info-content {
 padding: 0 8% 24px 8%;
 margin: 0 auto;
 background: #385c54;
 overflow-y: scroll;
 font-family: 'Fira Sans Condensed';
 font-size: 1rem;
 line-height: 1.25em;
 font-weight: 300;
}

.info-container {
 position: absolute;
 overflow-y: hidden;
 bottom: 0;
 right: 250px;
 z-index: 1000;
 background: #385c54;
 cursor: pointer;
 width: 300px;
 height: 60vh;
 color: #FFF;
 font-family: 'Fira Sans Condensed';
 font-size: 18px;
 transition: all 0.4s ease-in-out;
 transform: translateY(calc(100% - 80px));
 }

.info-container.info-active {
 transform: translateY(0);
 }

.info-body {
 margin-top: 80px;
 overflow-y: scroll;
 overflow-x: hidden;
 position: relative;
 height: 80%;
}

在JavaScript中，我尝试添加一个事件侦听器：

document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );

但它不起作用

---

希望有人能提供帮助。

解决方案确实是一个事件侦听器：

document.getElementById（'panoutitlu'）.addEventListener（“单击”，函数幻灯片（）{this.classList.toggle（'info-active'）；}

document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );