An Interest In:
Web News this Week
- March 22, 2024
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
October 25, 2021 05:16 am GMT
Original Link: https://dev.to/vadimfilimonov/accordion-on-pure-css-33ih
Accordion on pure CSS
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 heightheight: 0;// hide the blockoverflow: hidden;// set the duration of the animationtransition: 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.
Original Link: https://dev.to/vadimfilimonov/accordion-on-pure-css-33ih
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To