<div class="tabs">
  <div class="tabs__buttons">
    <div class="tabs__button" data-text="1">Таб 1</div>
    <div class="tabs__button" data-text="2">Таб 2</div>
    <div class="tabs__button" data-text="3">Таб 3</div>
  </div>
  </div>
  <div class="tabs__content">
    <div class="tabs__content-text data-text-1">Привет</div>
    <div class="tabs__content-text data-text-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas aut necessitatibus soluta, ex nam, natus odit laborum assumenda mollitia earum corrupti quis quia dignissimos. Officiis enim explicabo facere hic harum.</div>
    <div class="tabs__content-text data-text-3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste dolore, ipsum assumenda veniam ullam nesciunt veritatis quia, et eveniet placeat, ipsa corporis culpa odit itaque deleniti explicabo sunt in alias?</div>
  </div>
</div>

body {
  background: #323232;
  font-family: arial;
}
.tabs {
  color: white;
}
.tabs__buttons {
  display: flex;
  justify-content: flex-start;
}
.tabs__button {
  cursor: pointer;
  padding: 5px 8px;
}
.tabs__button:nth-child(1) {
  background-color: red;
}
.tabs__button:nth-child(2) {
  background-color: green;
}
.tabs__button:nth-child(3) {
  background-color: blue;
}

.tabs__content {
  max-width: 300px;
}
.tabs__content-text:nth-child(1) {
  height: 0px;
  overflow: auto;
  transition: all 0.3s ease-in;
  background-color: red;
}
.tabs__content-text:nth-child(1).active {
  height: 150px;
}
.tabs__content-text:nth-child(2) {
  height: 0px;
  overflow: auto;
  transition: all 0.3s ease-in;
  background-color: green;
}
.tabs__content-text:nth-child(2).active {
  height: 150px;
}
.tabs__content-text:nth-child(3) {
  height: 0px;
  overflow: auto;
  transition: all 0.3s ease-in;
  background-color: blue;
}
.tabs__content-text:nth-child(3).active {
  height: 150px;
}

const buttons = document.querySelectorAll(".tabs__button")
        buttons.forEach(el => {
            el.addEventListener('click', ev => {
                const content = document.querySelectorAll(".tabs__content-text")
                const target = ev.target
                const clicked = document.querySelector(`.data-text-${target.dataset.text}`)
                if (clicked.classList.contains("active")) {
                    content.forEach(item => item.classList.remove("active"))
                } else {
                    content.forEach(item => item.classList.remove("active"))
                    clicked.classList.add("active")
                }
            })
        })