아코디언 -기본 (Accordion -default type)

아코디언

See the Pen accordion_default by how2frontend (@how2frontend) on CodePen.

• default type Accordion: 가장 기본적인 기능만 구현(클릭시 해당 콘텐츠 토글)
• mark up : #accordion > .title + .content 
• 아코디언 타이틀로 사용한 버튼 태그(<button>)는 어떤 태그로든 변경 가능
• .title 클릭시 .active 클래스가 추가 되고, 다음 형제 요소의 CSS 속성이 변경된다.(display: none 또는 block;) 

 

<!-- accordion -->
<div id="accordion">
	<!-- loop --> 
	<button class="title">section 1</button> <!-- 태그 변경 가능 -->
	<div class="content">
		<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>
		<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>
		<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>
	<!-- // loop -->

	<button class="title">section 2</button>
	<div class="content">
		<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>

	<button class="title">section 3</button>
	<div class="content">
		<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>
</div>
<!-- // accordion -->

 

• vanila javascript
• const, let, classList 등 ECSMAScript2015에 추가된 변수 및 메소드를 사용하였다.
  IE 지원 등 크로스 브라우징(Cross Browsing)을 고려한다면, 폴리필(polyfill) 추가, const와 let 변수를 var로 변경하거나, 바벨(Babel) 같은 컴파일러가 필요하다.
  

const uiAccordion = document.getElementById('accordion'); 
const uiAccordionTitle = uiAccordion.getElementsByClassName('title');

for(let i = 0; i < uiAccordionTitle.length; i++ ){
	uiAccordionTitle[i].addEventListener('click', function(){
		this.classList.toggle('active');
		const uiAccordionContent = this.nextElementSibling;

		if(uiAccordionContent.style.display === 'block'){
			uiAccordionContent.style.display = 'none';
		}else{
			uiAccordionContent.style.display = 'block';
		}
	});
}	

 

• classList 폴리필(polyfill) : 아래 링크의 폴리필을 스크립트 상단에 붙여 넣으면 된다.

how2frontend.tistory.com/entry/classList?category=924762

classList