JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<button id="toggleButton">Нажмите для сворачивания/разворачивания</button>
<div id="content">
  <!-- Ваш контент здесь -->
</div>

CSS

#content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const toggleButton = document.getElementById("toggleButton");
  const content = document.getElementById("content");
  let isContentVisible = false;

  toggleButton.addEventListener("click", function() {
    if (isContentVisible) {
      content.style.maxHeight = "0";
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
    isContentVisible = !isContentVisible;
  });
});