html
<body>
<div class="arrcodian_wrap">
<dl class="arrcodian_contain">
<dt class="accordion">
1 title
</dt>
<dd class="panel">
1 panel
</dd>
<dt class="accordion">
2 title
</dt>
<dd class="panel">
2 panel
</dd>
<dt class="accordion">
3 title
</dt>
<dd class="panel">
3 panel
</dd>
<dt class="accordion">
4 title
</dt>
<dd class="panel">
4 panel
</dd>
<dt class="accordion">
5 title
</dt>
<dd class="panel">
5 panel
</dd>
</dl>
</div>
</body>
css
body{
background: #ffb900;
}
/* 아코디언메뉴 */
.arrcodian_wrap {
width: 200px;
margin: 50px auto 0;
border-radius: 10px;
overflow: hidden;
}
.accordion {
background-color: #f74f4f;
color: #fff;
cursor: pointer;
padding: 10px;
font-weight: bold;
border-bottom: 1px solid #ec3636;
font-size: 14px;
}
.panel {
background-color: #004a80;
color: #fff;
display: none;
padding: 12px;
font-size: 12px;
}
.panel.active {
display: block;
}
js
let acc = document.querySelectorAll(".accordion");
let panel;
[].forEach.call(acc, (accItem) => {
accItem.addEventListener('click', function() {
this.classList.toggle("active");
panel = this.nextElementSibling;
panel.classList.toggle('active');
})
})'Frontend' 카테고리의 다른 글
| transform hertz unit (0) | 2020.08.18 |
|---|---|
| NUXT.js 로 Vue SSR 세팅하기(1) (0) | 2019.06.23 |
| [jQuery] 최상단, 최하단 바로가기 애니메이트 버튼 (0) | 2019.04.11 |
| jQuery를 pure js, vue.js로 바꿔보자 (0) | 2019.02.25 |
| 뷰 설치 (0) | 2019.02.12 |