Create a Cool Accordion with CSS! 📇👨‍💻

How many times we struggle with creating Accordions, especially if this creation process is done from scratch, so today I'll be explaining how to do it in the Most Simple Way Possible!.

First We'll create a div with class "accordion", and inside it create two divs first will have the class "top" and second will have the class "bottom", at this point I can tell that you figured out the hierarchy of our component, your code must look similar to the code below.

<div class="accordion">
      <div class="top"></div>
      <div class="bottom"></div>
</div>

Then inside the top div We created before, we 'll have 3 things:

• a title, which could be any text element
• an image to represent a toggling button (optional)
• checkbox (crucial for css-only toggling, optional for javascript usage)

and for our bottom div which will contain the contents of the accordion , We'll have one element inside it or more or whatever you like, because this will be the content of our accordion.

 <div class="accordion">
    <div class="top">
        <div class="text">Accordion Title</div>
             <img src="https://assets-global.website- files.com/63e49089cb05f507aba64457/63e49089cb05f5c614a6446a_icon_plus.svg"
                    alt="">
             <input type="checkbox">
        </div>
    <div class="bottom">
             <div class="text">This is Accordion Content</div>
    </div>
</div>

Now, We've finished all the markup needed for our Cool Accordion, just a couple of simple CSS, and We'll get it to work, Our Accordion will use the display grid with one column and two rows (one for title, second for content, remember?). also it will have an overflow of hidden and a transition for smooth collapsing.

.accordion {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: .1fr 0fr;
    overflow: hidden;
    transition: grid-template-rows .3s cubic-bezier(0.19, 1, 0.22, 1);
}

For our top div it 'll have a totally optional styling, to me I used a padding of [1.85rem 1.5rem 1.75rem] and display: flex; along with aling-items: flex-start; position: relative ;and justify-content: space-between;

.top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.85rem 1.5rem 1.75rem;
    cursor: pointer;
}

.top input[type="checkbox"] {
    position: absolute;
    inset: 0;
    appearance: none;
    cursor: pointer;
}

You may noticed the absolute positioned checkbox, this is what achieve the CSS-only Toggling Functionality, using the CSS :has() along with :checked, We 'll be able to get it into work!

For our bottom div, which will have an optional inline padding of 1.5rem and a overflow of hidden (this one is crucial though.), maybe you could add a transition for smooth collapsing.

.bottom {
    padding-inline: 1.5rem;
    overflow: hidden;
    transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
}

Here comes the best yet most exciting part of this post, Changing the size of the Accordion's Second Row from 0fr to 1fr, using the CSS selectors :has() along with :checked

.accordion:has(input:checked) {
    grid-template-rows: .1fr 1fr;
}

Voila!, We did it, We make a CSS-only Cool Accordion! without struggling with height calculations, or using some JavaScript magic to do it. Below is a Demo of this Cool Accordion, along with the code actually, maybe you take a tour at my CodePen to see some extraordinary CSS experiments & more

If you read this, then this means that you really like it or (mistakenly scrolled) anyway, Drop a like, Follow for more.

My Twitter where I spend most of my time 👨‍💻😎