CSS accordion

overflow + max-height

<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

다음과 같은 요소가 있다고 가정할 때, 결과물은 다음과 같음

그런데, accordion을 만드려면, 일단 이 요소가 보여서는 안됨. 그럴때는 display: none을 쓰곤 했는데, 이번에는 그거보다는, accordion을 위한 animation효과를 주기 위해 다른 방식을 사용해 보겠음

.panel{
    max-height: 0;
    overflow: hidden;
}

눈치 챘는지는 모르겠지만 이렇게 하면, 아예 위 처럼 아무런 결과물도 뜨지 않음

border로 경계선을 추가해도, 이렇게 높이가 0이라 일직선 형태로 나타나는 것을 볼 수 있음

max-height가 0이어도, 안의 p태그의 내용물이 쏟아져 나오게 되는데, 이것을 overflow를 통해 잘라낼 수 있음

실제로

.panel{
  max-height: 0;
  border: 4px solid red;
}

위와 같이 코드를 작성할 시, 결과물은 아래와 같음

즉, p의 내용물이 부모 요소인 div가 height가 0이니 넘쳐 나오는 것을 볼 수 있음 border는 부모인 div에 그어진 경계선

---

다음은, 이 accordion제작에 필요한 버튼을 정의하겠음

<button id="accordion">Section</button>

#accordion{
    padding: 20px;
    font-size: 15px;
    text-align: left;
    background: #f2f2f2;
    border: none;
    outline: none;
}

위와 같은 결과물이 만들어짐 (밑에 짙은 회색선은 캡쳐때 발생한 것으로 실제는 #f2f2f2색 바탕만 해당)

JavaScript

이제 자바스크립트 코드가 필요한 시점

        const acc = document.getElementById("accordion");
        acc.addEventListener("click", function () {
            const panel = this.nextElementSibling;
            if (panel.style.maxHeight)
                panel.style.maxHeight = null;
            else panel.style.maxHeight = panel.scrollHeight + "px";
            console.log(panel.scrollHeight);
       });

클릭시에 max-height가 0이 아니라면 null로 만들어주고, 0이라면, panel.scrollHeight를 계산해 px를 붙여줌

여기서 scrollHeight는 .panel의 padding이나 글자 수, 혹은 width의 길이에 따라 바뀔 수 있음, 가로로 길쭉한 웹페이지의 경우 그만큼 많은 글자를 한 줄에 담을 수 있으니 scrollHeight가 적게 나오고, 핸드폰의 경우 가로가 짧은 만큼 여러 줄이 나오니 scrollHeight가 크게 나올 것임

클릭하면 다음처럼 결과가 나오게 됨
여기에 .accordion 클래스를 여러개 추가하고, 안에 다른 내용물들을 넣을 수 있게 해준 다음, transition을 통해, max-height가 바뀔 때 transition이 적용되도록 하면 애니메이션 효과까지 들어간 accordion을 만들 수 있음

정리

1. accordion 사용시 max-height + overflow: hidden 활용할 것
2. 1번에 의해 보이지 않게된 panel에게는 JavaScript의 scrollHeight를 이용
3. 하나의 accordion생성이 완료되면 여러개에 적용하고 transition을 넣을 것