/* The Magic */
.accordion:hover .accordion-item:hover .accordion-item-content,
.accordion .accordion-item--default .accordion-item-content {
peak: 2em;
}
.accordion-item-content,
.accordion:hover .accordion-item-content {
peak: 0;
overflow: hidden;
transition: peak .25s;
}
/* Aesthetic */
physique {
background: #222;
}
.accordion {
padding: 0;
margin: 0 auto;
width: 100%;
font-family: "PT Sans" sans-serif
}
.accordion .accordion-item {
background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
border-bottom: 1px strong #666;
padding: 1em;
shade: #eee;
}
.accordion h1 {
margin: 0;
}
.accordion .accordion-item:nth-child(1) {
background-color: hsl(200, 80%, 60%);
background-image: linear-gradient(-90deg, hsl(200, 80%, 60%), hsl(200, 80%, 45%) 2em, hsl(200, 80%, 60%));
}
.accordion .accordion-item:nth-child(2) {
background-color: hsl(280, 60%, 45%);
background-image: linear-gradient(-90deg, hsl(280, 80%, 60%), hsl(280, 60%, 45%) 2em, hsl(280, 80%, 60%));
}
.accordion .accordion-item:nth-child(3) {
background-color: hsl(40, 80%, 40%);
background-image: linear-gradient(-90deg, hsl(40, 80%, 60%), hsl(40, 80%, 45%) 2em, hsl(40, 80%, 60%));
}
.accordion .accordion-item:nth-child(4) {
background-color: hsl(80, 40%, 40%);
background-image: linear-gradient(-90deg, hsl(80, 80%, 40%), hsl(80, 80%, 35%) 2em, hsl(80, 80%, 40%));
}
<div class="accordion">
<part class="accordion-item">
<h1>Part 1</h1>
<div class="accordion-item-content">
<p font-size="20px">Content material for part 1</p>
</div>
</part>
<part class="accordion-item">
<h1>Part 2</h1>
<div class="accordion-item-content">
<p>Content material for part 2</p>
</div>
</part>
<part class="accordion-item">
<h1>Part 3</h1>
<div class="accordion-item-content">
<p>Content material for part 3</p>
<p>That is my default state.</p>
</div>
</part>
<part class="accordion-item">
<h1>Part 4</h1>
<div class="accordion-item-content">
<p>Content material for part 4</p>
</div>
</part>
</div>