<div class="container">
  <button id="toggleButton">Toggle Content</button>
  <div id="content" class="content">
    <p>這是一段示例文本。點擊按鈕來顯示或隱藏這段內容。</p>
  </div>
</div>
.container {
  width: 300px;
  margin: 50px auto;
  text-align: center;
}

.content {
  overflow: hidden;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  max-height: 0;
  transition: max-height 0.5s ease;
}

.show {
  height: auto;
  max-height: 80px;
}
const button = document.getElementById('toggleButton');
const content = document.getElementById('content');

button.addEventListener('click', () => {
  content.classList.contains('show')
    ?  content.classList.remove('show')
    :  content.classList.add('show')
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.