<div class="panels">
    <div class="panel panel1">
      <p class="item name">Alice</p>
      <p class="item index">I</p>
      <p class="item desc">Pixiv Content ID: 65843704</p>
    </div>
    <div class="panel panel2">
      <p class="item name">Birthday</p>
      <p class="item index">II</p>
      <p class="item desc">Pixiv Content ID: 70487844</p>
    </div>
    <div class="panel panel3">
      <p class="item name">Dream</p>
      <p class="item index">III</p>
      <p class="item desc">Pixiv Content ID: 65040104</p>
    </div>
    <div class="panel panel4">
      <p class="item name">Daliy</p>
      <p class="item index">IV</p>
      <p class="item desc">Pixiv Content ID: 64702860</p>
    </div>
    <div class="panel panel5">
      <p class="item name">Schoolyard</p>
      <p class="item index">V</p>
      <p class="item desc">Pixiv Content ID: 67270728</p>
    </div>
  </div>

html {
  font-family: 'helvetica neue';
  font-size: 20px;
  font-weight: 200;
  background: #f7f7f7;
  /* background: #ffc600; */
}

body,
p {
  margin: 0;
}

.panels {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
}

.panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  background: #ececec;
  text-align: center;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
  transition: font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
    flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s;
  font-size: 20px;
  background-size: cover;
  background-position: center;
}

.item {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: transform 0.5s;

  /* text-transform: uppercase; */
  font-size: 1.6em;
  font-family: 'Amatic SC', cursive;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
}

.name {
  transform: translateY(-100%);
}

.index {
  font-size: 4em !important;
}

.desc {
  transform: translateY(100%);
}

.open-active .name,
.open-active .desc {
  transform: translateY(0);
}

.panel.open {
  flex: 3;
  font-size: 40px;
}

.panel1 {
  background-image: url('https://tva2.sinaimg.com/mw690/e48206bbgy1gexhd25msfj20hr0rswz4.jpg');
}

.panel2 {
  background-image: url('https://tva2.sinaimg.com/large/e48206bbgy1gexhklv6bqj224k1bk1ky.jpg');
}

.panel3 {
  background-image: url('https://tva2.sinaimg.cn/large/e48206bbgy1gexl19x4tbj228e35p1as.jpg');
}

.panel4 {
  background-image: url('https://tva2.sinaimg.cn/large/e48206bbgy1gexl23ha39j213g1171kx.jpg');
}

.panel5 {
  background-image: url('https://tva2.sinaimg.cn/large/e48206bbgy1gexl2i0nwhj20v412wu0x.jpg');
}

 const panels = document.querySelectorAll('.panel')

    function toggleOpen() {
      panels.forEach(item => {
        if (item === this) return;
        item.classList.remove('open')
      });

      this.classList.toggle('open');
    }

    function toggleActicon(e) {
      if (e.propertyName.includes('flex-grow')) {
        this.classList.toggle('open-active')
      }
    }

    panels.forEach(panel => panel.addEventListener('click', toggleOpen))
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActicon))