3. CSS,JavaScript 간단한 아코디언(접는 콘텐츠) 만들기 (How to make CSS Collapsibles/Accordion)

RESULT

Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1

Hello, It's Section2
Hello, It's Section2
Hello, It's Section2

Hello, It's Section3

 

body

 <button class="accordion">Section Btn1</button>
    <div class="panel">
       	<p>Hello, It's Section1<br>
     	   Hello, It's Section1<br>
           Hello, It's Section1<br>
           Hello, It's Section1<br>
           Hello, It's Section1<br>
           Hello, It's Section1<br>
           Hello, It's Section1<br>
        </p>
    </div>

    <button class="accordion">Section Btn2</button>
    <div class="panel">
        <p>Hello, It's Section2<br>
           Hello, It's Section2<br>
           Hello, It's Section2<br>
        </p>
    </div>

    <button class="accordion">Section Btn3</button>
    <div class="panel">
        <p>Hello, It's Section3</p>
    </div>

 

CSS style

    .accordion{
        background-color: whitesmoke;   /* 배경색상 화이트스모크 */
        cursor: pointer;    /* 커서 포인터표시 */
        width: 100%;        
        padding: 18px;      /* 텍스트기준으로 여백 18px 지정 */
        border: none;       /* 테두리 없음 */
        text-align: left;       /* 텍스트 왼쪽정렬 */
        font-size: 15px;    
        transition: 0.4s;   /* 애니메이션 효과 0.4초 지정 */
    }

    .on, .accordion:hover{/*js toggle설정[클릭하면 .on으로 이벤트실행] 자세한건 더보기 클릭 , 
                            accordion 마우스 올릴시 효과를 */
        background-color: gray;  /* 배경색 그레이로 변경 */
    }

    .panel{
        padding: 0 18px; /* 상하여백 0px, 좌우여백 18px */
        background-color: white;
        overflow: hidden; /* 컨텐츠 용량 초과시 스크롤 생기게함 */
        max-height: 0; /* 요소의 최대 높이 0px으로 지정 (어차피 숨기는게 목적이니 0px이다.)*/
        transition: max-height 0.2s ease-out;	/* max-height를 0.2초 애니메이션을 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료한다. */
    }

 

JavaScript

 

var acc = document.getElementsByClassName("accordion"); //accordion 클래스를 변수 acc로 지정
var val; //변수 val

for (val = 0; val < acc.length; val++) { // 한동작을 여러번 반복해야하므로 for문 사용(패널을 열었다가 닫았다가 반복)
  acc[val].addEventListener("click", function() { //addEventListener(클릭하면 실행하는 특정요소를 등록)
    this.classList.toggle("on");    //toggle메서드(0과1이 반복)이전글 참고 

    var panel = this.nextElementSibling; //패널을 전부 가져옴 (아래 추가 설명 참고)
    
    // 아래부터 CSS를 쓰지 않고 자바스크립트로 높이 속성값을 지정함
    if (panel.style.maxHeight) { //panel 최대높이
      panel.style.maxHeight = null; //최대높이를 초기null로 지정함 그래야 처음에 보이지않는다 (근데 이상하게 0은안됨..이유가뭘까)
    } else { //또는
      panel.style.maxHeight = panel.scrollHeight + "px"; // penal 높이에따라 크기변경(섹션1,2차이를 보면안다)
    } //결론은  accordion을 누르면 panel이 보였다가 안보였다가 반복해야하므로 for문을 사용하고
    //최대높이가 처음에는 panel이 당연히 보이지 않다가 accordion을 누르면 최대높이가 컨텐츠에 맞게 등장해야하므로
    //스타일을 지정해준 것
  });
}

 

여기서 중요한건 

var panel = this.nextElementSibling 입니다
nextSibling, nextElementSibling 두가지가 있는데, 모두 같은 node 레벨의 다음 값을 가져오고                                          
 둘의 차이는 nextSibling은 값을 공백이든, 텍스트든 가리지 않고 가져오고,
nextElementSibling 은 요소(Element)만 가져옵니다. 
그러니까 위 JS에서 nextElementSibling 는 변수panel을 div(요소)를 가져와서
높이 속성 값을 지정한 것이라고 보면 될 것 같습니다.

 결론은 accordion을 누르면 panel이 보였다가 안보였다가 반복해야하므로 for문을 사용하고   
최대높이가 처음에는 panel이 당연히 보이지 않다가 accordion을 누르면
최대높이가 컨텐츠에 맞게 등장해야하므로 스타일을 지정해준 것입니다.

---

+α

특수 문자 [ + ] [ - ]추가 하기

 

    .accordion::after { /* accordion 뒤에 가상 콘텐츠 삽입 */
  		content: '\02795'; /* 특수문자 (+) */
  		font-size: 13px;
  		color: #777;
  		float: right; /* 오른쪽 정렬 */
 		margin-left: 5px;
	}

    .on::after {    /* js에서 on 이벤트 실행시 뒤에 가상콘텐츠 삽입 */
     	content: "\2796"; /* 특수문자 (-) */
	}

::before / ::after  ?

요소의 (elements) 앞에 가상 콘텐츠(특수 문자,텍스트,이미지 등) 를 삽입할 때 사용하며 
before와 after 말 그대로 앞에 뒤에 삽입합니다 

주의할 점은 가상 콘텐츠를 삽입하지 않더라도 무조건 content:' ' 를 사용해서 공백을 남겨놔야 합니다.
 
그렇다면 가상 콘텐츠를 삽입하지 않는다면 뭐하러 before와 after를 사용하느냐..
메뉴의 구분선을 만들거나 문서 타이틀을 만들 때 주로 사용하는데 
관련해서는 나중에 다른 글로 설명하겠습니다

특수 문자 추가 후 RESULT

Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1
Hello, It's Section1

Hello, It's Section2
Hello, It's Section2
Hello, It's Section2

Hello, It's Section3