<article>
<h1>Flexbox Accordion</h1>
<div class="accordion">
<section class="accordion--el el-1 open">
<div class="accordion--el-title">
<h2>Sezione #1</h2>
</div>
<div class="accordion--el-content">
<p>Contenuto sezione #1</p>
</div>
</section>
<section class="accordion--el el-2">
<div class="accordion--el-title">
<h2>Sezione #2</h2>
</div>
<div class="accordion--el-content">
<p>Contenuto sezione #2</p>
</div>
</section>
<section class="accordion--el el-3">
<div class="accordion--el-title">
<h2>Sezione #3</h2>
</div>
<div class="accordion--el-content">
<p>Contenuto sezione #3</p>
</div>
</section>
</div>
</article>
article {
max-width: 350px;
margin: 64px auto;
}
.accordion {
display: flex;
flow: row nowrap;
&--el {
position: relative;
display: inline-flex;
flex: 3 3 100%;
height: 200px;
min-width: 48px;
border: 1px solid grey;
overflow: hidden;
transition: flex 0.75s ease-in-out;
&-title {
display: inline-flex;
justify-content: center;
width: 48px;
background-color: lightgrey;
& h2 {
height: 32px;
margin: 0;
transform: rotate(-90deg);
transform-origin: 80% 140% 0;
white-space: nowrap;
line-height: 1;
}
}
&-content {
display: inline-flex;
margin: 16px;
width: 100%;
min-width: 450px;
}
&.open {
flex: 3 1 100%;
}
}
}
View Compiled
var accordionEl = document.querySelectorAll(".accordion--el");
accordionEl.forEach((element) =>
element.addEventListener(
"click",
function (e) {
let accordion = this.parentNode;
let openEl = document.querySelectorAll(".open");
e.currentTarget.classList.add("open");
for (let i = 0; i < openEl.length; i++) {
if (openEl[i] != e.currentTarget) {
openEl[i].classList.remove("open");
}
}
element.stopPropagation;
},
false
)
);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.