JSFiddle - React, Tailwind, and code Playground

by enagu

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <ul id="list">
      <li class="list-item">
        <div class="main-information">
          <span class="current">[current]</span>
          <span class="item-title">Clase del 17 de junio de 2021.mp4 - Google Drive</span>
        </div>
        <div class="details">
          <span class="item-time" data-time="${time}">17.29 minutes</span>
          <a href="#">open</a>
          <span class="item-remove">x</span>
        </div>
      </li>
      
      <li class="list-item">
        <div class="main-information">
        <!-- <span class="current">[current]</span> -->
          <span class="item-title">Clase del 19 de junio de 2021.mp4 - Google Drive</span>
        </div>
        <div class="details">
          <span class="item-time" data-time="${time}">12.29 minutes</span>
          <a href="#">open</a>
          <span class="item-remove">x</span>
        </div>
      </li>
      
      <li class="list-item">
        <div class="main-information">
        <!-- <span class="current">[current]</span> -->
          <span class="item-title">Clase del 10 de junio de 2021.mp4 - Google Drive</span>
        </div>
        <div class="details">
          <span class="item-time" data-time="${time}">1.29 minutes</span>
          <a href="#">open</a>
          <span class="item-remove">x</span>
        </div>
      </li>
    </ul>
    <script src="popup.js"></script>
  </body>
</html>

CSS

body {
    background-color: #007b97;
    color: #fff;
}

#list {
    display: block;
    width: max-content;
    margin: 0;
    padding: 0;
}

li.list-item .main-information {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
}

li.list-item .details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* justify-content: flex-end; */
  max-height: 0;
  overflow: hidden;
  transition: all 0.2s ease-out;
}

li.list-item.show-details .details {
    border-top: 1px solid #ffffff4f;
    padding: 0.5rem 0.2rem;
    margin-bottom: 0.5rem;
}

li.list-item:hover {
    background-color: #008faf;
}

li.list-item .item-title {
    margin-right: 2.2rem;
}

li.list-item .item-time {
    margin-right: 2.2rem;
}

.item-remove {
    color: #740606;
    font-weight: bolder;
    padding: 0.3rem;
    border-radius: 3px;
}

.item-remove:hover {
    background-color: #ff00004f;
    color: #fff;
}

.current {
    display: none;
}

li.list-item.is-current .current {
    display: block;
    margin-right: 0.3rem;
    color: #00f3ff;
}

JavaScript

[...document.querySelectorAll("li")].forEach(li => {
    li.addEventListener("click", function (e) {
      	let details = li.querySelector('.details');
        if (li.classList.contains("show-details")) {
        	details.style.display = "none";
        	details.style.maxHeight = null;
        } else {
        	details.style.display = "flex";
          details.style.maxHeight = details.scrollHeight + "px";
        }
        li.classList.toggle("show-details");
    });
});