콘텐츠 펼쳐짐: 접히는 컨텐츠/아코디언

합디어(고리형 내용) 생성법 배우기

합디어 생성

첫 번째 단계 - HTML 추가：

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

두 번째 단계 - CSS 추가：

합디어의 스타일 설정

/* 합디어 패널을 열고 닫는 버튼의 스타일 설정 */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}
/* 버튼이 클릭되면 (JS로 .active 클래스 추가) 배경색 추가 및 마우스 오버 시 배경색 추가 */
.active, .accordion:hover {
  background-color: #ccc;
}
/* 합디어 패널에 스타일 추가。주의: 기본적으로 숨겨져 있습니다。*/
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

세 번째 단계 - JavaScript 추가：

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* "active" 클래스 추가와 제거切换添加和删除 "active" 类，以突出显示控制面板的按钮 */
    this.classList.toggle("active");
    /* 활동 패널 숨기기와 표시切换 */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {}}
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

직접 시도해 보세요

애니메이션 합창기(내려다르기)

애니메이션 합창기(내려다르기)를 만들기 위해 패널 클래스에: max-height: 0、overflow: hidden 또한 max-height 속성의 전환 효과.

그런 다음, 다른 스크린 크기에 따라 패널 높이를 계산하고 설정하도록 JavaScript를 사용합니다: max-height내용이 내려다르는 효과를 만들기 위해:

<style>
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}
</script>

직접 시도해 보세요

아이콘 추가

각 버튼에 기호를 추가하여 펼쳐진 내용이 열려있는지 닫혀있는지를 나타내세요:

.accordion:after {
  content: '\02795'; /* "增加기호"(+)의 Unicode 문자 */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "감소기호"(-)의 Unicode 문자 */
}

직접 시도해 보세요