여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How To - 접이식 / 아코디언
How To – 접이식 / 아코디언
1개월전 작성
2개월전 수정

w3.css

접이식 / 아코디언

아코디언(접이식 콘텐츠)을 만드는 방법을 알아보자.

아코디언

아코디언은 많은 양의 콘텐츠를 숨기거나 표시하려는 경우에 유용하다.

1단계) 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>
2단계) CSS 추가
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}
3단계) ​​자바스크립트 추가
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
기본 예시
예제 보기

애니메이션 아코디언(슬라이드 다운)

애니메이션 아코디언을 만들려면 .transitionpanel 클래스에 max-height: 0, overflow: 숨김 및 최대 높이 속성에 대한 전환을 추가한다.

그런 다음 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 character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그