Skip to content

Instantly share code, notes, and snippets.

@olgam4
Last active February 4, 2024 00:18
Show Gist options
  • Save olgam4/67b54b342e167d8df2c38969b1d7e56d to your computer and use it in GitHub Desktop.
Save olgam4/67b54b342e167d8df2c38969b1d7e56d to your computer and use it in GitHub Desktop.
Accordion: animated, accessible, JS free
<body>
<div class="wrapper">
<h1>
Accordion with grid and checkboxes
</h1>
<div class="accordion">
<input id="option1" class="accordion-trigger" type="checkbox" tabindex="0" aria-controls="content-1" />
<label for="option1" class="accordion-header">
<h2>
Option 1
</h2>
</label>
<div class="accordion-content" id="content-1">
<article>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, est omnis quam ab deleniti, quas nam ut quaerat sequi autem aperiam laborum. Distinctio tempora exercitationem sint recusandae dicta expedita eveniet!</p>
</article>
</div>
</div>
<div class="accordion"">
<input id="option2" class="accordion-trigger" type="checkbox" tabindex="0" aria-controls="content-2" />
<label for="option2" class="accordion-header">
<h2>
Option 2
</h2>
</label>
<div class="accordion-content" id="content-2">
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!</p>
</article>
</div>
</div>
<div class="accordion">
<input id="option3" class="accordion-trigger" type="checkbox" tabindex="0" aria-controls="content-3" />
<label for="option3" class="accordion-header">
<h2>
Option 3
</h2>
</label>
<div class="accordion-content" id="content-3">
<article>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iusto, amet!</p>
</article>
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis maiores laboriosam laudantium a, ipsa nulla animi perferendis dolore beatae sunt id totam recusandae quam cupiditate tempora rem dolorum repudiandae ad!
</p>
</div>
</body>
/* Simple reset */
body {
font-family: system-ui;
}
h2 {
margin: 0;
font-size: 1em;
font-weight: 400;
}
.wrapper {
max-width: 70ch;
margin: auto;
}
/* Actual CSS */
.accordion {
position: relative;
isolation: isolate;
&:has(input:focus-visible) .accordion-header {
outline: 2px solid blue;
}
article {
background: #f7f7f7;
padding: 0 1em;
}
.accordion-trigger {
position: absolute;
opacity: 0;
}
.accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 500ms;
> * {
overflow: hidden;
grid-row: 1 / span 2;
}
}
.accordion-header {
background: #eee;
position: relative;
border-radius: 0.25em;
cursor: pointer;
display: block;
margin-bottom: 0.125em;
padding: 0.25em 1em;
transition: background 500ms, border-radius 500ms;
display: flex;
justify-content: space-between;
&:hover {
background: #f7f7f7;
}
&::after {
content: "+";
font-weight: 700;
transform-origin: center;
transition: all 500ms;
}
}
&:has(input:checked) {
& .accordion-content {
grid-template-rows: 1fr;
margin-bottom: 0.125em;
}
& .accordion-header {
background: #aaa;
border-radius: 0.25em 0.25em 0 0;
&:hover {
background: #ccc;
}
&::after {
rotate: 45deg;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment