This content originally appeared on DEV Community and was authored by Vadim Filimonov
In this article I will try to tell you how to create an accordion using only styles.
Layout
<input class="question-input" id="question" type="checkbox">
<label class="question-label" for="question">
Click me?
</label>
<div class="answer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque officia ipsum quam sequi! Ratione dolorem ad quam maxime a facere voluptate? Nulla dignissimos iure dolorum, a fuga excepturi sunt modi!
</div>
Instead of adding an additional class, we will focus on the :checked pseudo-class of the input element.
Styles
.question-input {
display: none;
}
.answer {
height: 0;
overflow: hidden;
transition: 0.5s;
}
.question-input:checked + .question-label + .answer {
height: auto;
padding: 10px 0;
}
Piece by piece
Hide the checkbox
.question-input {
display: none;
}
It's better to do it through the visually hidden pattern, but it's enough for a tutorial example.
Setting the answer styles
.answer {
// reset the height
height: 0;
// hide the block
overflow: hidden;
// set the duration of the animation
transition: 0.5s;
}
And describe the rules for the unfolded accordion
.question-input:checked + .question-label + .answer {
height: auto;
padding: 10px 0;
}
A couple of words about the animation - it is crooked:
This is due to the fact that height: auto; can not be animated through transition, you need to know the exact value. That's why, as a hack, we use padding.
If you're happy with the animation - consider yourself lucky.
See my codepen for the current demo.
This content originally appeared on DEV Community and was authored by Vadim Filimonov
Vadim Filimonov | Sciencx (2021-10-25T05:16:59+00:00) Accordion on pure CSS. Retrieved from https://www.scien.cx/2021/10/25/accordion-on-pure-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.