연습장:Sakura/1 문서 원본 보기

<html>
<div class="accordion">
  <div class="accordion-header">Section 1</div>
  <div class="accordion-content">
    <p>Content for Section 1 goes here.</p>
  </div>
  <div class="accordion-header">Section 2</div>
  <div class="accordion-content">
    <p>Content for Section 2 goes here.</p>
  </div>
  <div class="accordion-header">Section 3</div>
  <div class="accordion-content">
    <p>Content for Section 3 goes here.</p>
  </div>
</div>

<style>
.accordion-header {
  cursor: pointer;
  font-weight: bold;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-content.active {
  max-height: 500px;
}
</style>

<script>
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    header.nextElementSibling.classList.toggle('active');
  });
});
</script>
</html>