Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 25, 2021 05:16 am GMT

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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To