<details class="accordion">
<summary class="accordion__summary">
<span class="accordion__title">
アコーディオンタイトル
</span>
</summary>
<div class="accordion__content">
アコーディオンの内容
</div>
</details>
summary {
display: block;
}
summary::-webkit-details-marker {
display: none;
}
.accordion__title {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
padding: 16px;
font-weight: bold;
cursor: pointer;
border: 1px solid #CCC;
}
.accordion__content {
padding: 16px;
background: #EFEFEF;
border: 1px solid #CCC;
}
.accordion__title::after {
content: "";
width: 7px;
height: 7px;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
}
.accordion__title::after {
animation: 0.3s close-icon forwards;
}
@keyframes close-icon {
from {
transform: rotate(0deg);
}
to{
transform: rotate(-45deg);
}
}
.accordion[open] .accordion__title::after {
animation: 0.3s open-icon forwards;
}
@keyframes open-icon {
from {
transform: rotate(0deg);
}
to{
transform: rotate(45deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.