Skip to content

Instantly share code, notes, and snippets.

@auniverseaway
Last active November 11, 2021 01:20
Show Gist options
  • Save auniverseaway/a95567f5ff633b7803710d46c002f9ff to your computer and use it in GitHub Desktop.
Save auniverseaway/a95567f5ff633b7803710d46c002f9ff to your computer and use it in GitHub Desktop.
.accordion {
background: #EFEFEF;
border: 1px solid #dddddd;
border-radius: 6px;
}
.accordion .item-title {
cursor: pointer;
padding: 12px;
border-bottom: 1px solid #dddddd;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion .item-title:after {
width: 10px;
height: 10px;
border-bottom: 2px solid #a7a7a7;
border-right: 2px solid #a7a7a7;
transform-origin: 75% 75%;
transform: rotate(-45deg) translateY(-50%);
transition: transform .1s ease;
content: '';
}
.accordion .item-title.open {
background: #dddddd;
}
.accordion .item-title.open::after {
transform: rotate(-135deg) translateX(50%);
}
.accordion .item-content {
display: none;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px;
border-bottom: 1px solid #dddddd;
}
.accordion .item-title.open + .item-content {
display: grid;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment