<main>
<div class="AcWrap">
<ul class="AcItem">
<li class="AcBtn">
Accordion|01
</li>
<li class="AcData">
<div class="inner">
<span>・accordion menu・accordion menu</span>
</div>
</li>
</ul>
<ul class="AcItem">
<li class="AcBtn">
Accordion|02
</li>
<li class="AcData">
<div class="inner">
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
</div>
</li>
</ul>
<ul class="AcItem">
<li class="AcBtn">
Accordion|03
</li>
<li class="AcData">
<div class="inner">
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
</div>
</li>
</ul>
<ul class="AcItem">
<li class="AcBtn">
Accordion|04
</li>
<li class="AcData">
<div class="inner">
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
</div>
</li>
</ul>
<ul class="AcItem">
<li class="AcBtn">
Accordion|05
</li>
<li class="AcData">
<div class="inner">
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
<span>・accordion menu・accordion menu</span>
</div>
</li>
</ul>
</div>
</main>
html, body{
margin: 0;
padding: 0;
background: #161616;
color: #fff;
}
ul, li{
list-style: none;
margin: 0;
padding: 0;
}
span{
display: inline-block;
width: 100%;
}
.AcWrap{
padding: 80px 0;
height: auto;
width: 80vw;
max-width: 400px;
margin: auto;
}
.AcItem{
margin: 24px 0;
}
.AcBtn{
position: relative;
z-index: 1;
padding: 16px;
background: #2b4055;
cursor: pointer;
border-radius: 8px;
transition: .4s ease background;
&:hover{
background: #3d4d5c;
}
}
.AcData{
position: relative;
z-index: 0;
overflow: hidden;
background: #fff;
color: #161616;
border-radius: 0 0 8px 8px;
margin-top: -8px;
transition: .4s ease height;
.inner{
padding: 24px 16px 16px;
transition: 1.2s ease opacity;
opacity: 0;
}
}
.AcItem.-open{
.inner{
opacity: 1;
}
}
View Compiled
window.addEventListener("DOMContentLoaded", () => {
class Accordion {
constructor(AcBtns, AcDatas){
this.isResize = true;
this.w = window.innerWidth;
this.HeightArray = [];
this.AcBtns = AcBtns;
this.AcDatas = AcDatas;
this.onSwitch = this.onSwitch.bind(this);
this.init();
}
setStyle(){
this.AcDatas.forEach(ele => {
let h = ele.children[0].clientHeight
ele.style.height = 0;
this.HeightArray.push(h);
});
}
onAllSwitch(){
this.AcBtns.forEach(ele => {
var parent = ele.parentNode;
var next = ele.nextElementSibling;
if (parent.classList.contains("-open")) {
next.style.height = 0;
parent.classList.remove("-open");
}
});
}
onSwitch(ele, i){
var parent = ele.parentNode;
var next = ele.nextElementSibling;
if (parent.classList.contains("-open")) {
this.onAllSwitch();
next.style.height = 0;
parent.classList.remove("-open");
} else {
this.onAllSwitch();
parent.classList.add("-open");
next.style.height = this.HeightArray[i] + "px";
}
}
onResize(){
this.HeightArray.length = 0;
this.AcDatas.forEach(ele => {
let h = ele.children[0].clientHeight
if (ele.parentNode.classList.contains("-open")) ele.style.height = h + "px";
this.HeightArray.push(h);
});
this.w = window.innerWidth;
}
init(){
this.setStyle();
window.addEventListener("resize", e => {
if (this.isResize) {
requestAnimationFrame(() => {
this.isResize = true;
if (this.w != window.innerWidth) {
this.onResize();
};
});
this.isResize = false;
};
});
this.AcBtns.forEach((ele, i) => {
ele.addEventListener("click", e => {
this.onSwitch(ele, i);
});
});
}
}
const AcBtns = document.querySelectorAll(".AcBtn");
const AcDatas = document.querySelectorAll(".AcData")
new Accordion(AcBtns, AcDatas);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.