JSFiddle - React, Tailwind, and code Playground

by TheCrossCarrier

HTML

<div class="spoiler">
  <div class="spoiler__btn">Spoiler</div>
  <ul class="spoiler__list">
    <li class="spoiler__item">First</li>
    <li class="spoiler__item"><a href="tel:+782123">+782123</a></li>
    <li class="spoiler__item">Third</li>
  </ul>
</div>

<div class="another">
  <h3>Another Section</h3>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.spoiler {
  padding-left: 100px;
  width: 100%;
  height: 40px;
  overflow: hidden;
  background-color: lightgray;
  font-family: sans-serif;
  color: green;
  transition: 0.5s ease;
}

.spoiler_active {
  height: 110px;
}

.spoiler__btn {
  line-height: 39px;
  cursor: pointer;
}

.spoiler__list {
  list-style: none;
  margin: 5px;
}

.another {
  padding: 15px;
  color: gray;
}

JavaScript

const
	spoiler = document.querySelector('.spoiler'),
  btn = document.querySelector('.spoiler__btn')
  
btn.onclick = () => spoiler.classList.toggle('spoiler_active')