blog/web

Building a Cool Collapse Effect with Pure CSS and Checkbox Magic! 🚀

Ever wanted to add a slick collapsible section to your webpage without diving into the world of JavaScript? Well, buckle up because we're about to create a nifty collapsible content area using just CSS and a cheeky checkbox trick!

The Checkbox Hack Unleashed

The magic here lies in the checkbox hack. By strategically placing a hidden checkbox and playing with its checked state, we can make some awesome things happen.

HTML


<div style="display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;"><input id="toggle" class="toggle" type="checkbox" style="display: none;" name="dropdown" />
    <label class="form-label" style="width: 100%;border-bottom: 1px solid #232B2B;display: flex;justify-content: space-between;font-size: 32px;color: #232B2B;font-weight: 300;line-height: 48px;cursor: pointer;user-select: none;" for="toggle">
        <span>Lorem ipsum</span><span class="icon" style="width: 32px;display: flex;justify-content: center;"></span>
    </label>
    <div class="content" style="display: grid;grid-template-rows: 0fr;transition: 250ms grid-template-rows ease;">
        <div style="overflow: hidden;">
            <!-- content -->
        </div>
    </div>
</div>

We've got a div wrapping everything, a hidden checkbox, a label that acts as our trigger, and a div for our collapsible content.

CSS

.icon::after {
  content: "+";
}

#toggle:checked ~ label > .icon::after {
  content: "-";
}

#toggle:checked ~ div {
  grid-template-rows: 1fr !important;
}

Side note

To make duplicates of the code, you would need to change the id of the input and the for attribute of the label. Also duplicate the CSS sibling selector ~ logic. In this example, switch out #toggle with #toggle2 and #toggle3, and so on.. Preferably a more descriptive name. Simple as that, or just use a reusable component in your framework of choice, send in the id as a prop, label text, and content as children. Then let the component do its magic.

Digging into the Magic

When a user clicks on the label, it triggers a change in the checkbox state due to the association established via the for attribute. Upon the label click, the checkbox toggles its checked state, which activates the CSS rules defined for the checked state.

Flow:

  • User clicks on the label.
  • The icon displayed on the label switches from a plus sign (+) to a minus sign (-), indicating the change in content visibility and the input state.
  • The content div expands and collapses smoothly, thanks to the grid-template-rows property and the transition effect.

The Final Touch

By utilizing grid-template-rows, we can create a smooth and visually appealing collapse effect without ever worrying about a height value. This is a great way to keep your HTML clean and your CSS simple. You might be wondering why I used inline styles, and the answer is simple: I wanted to keep the example as straightforward as possible. Since this is build up using inline styles, is not the "best practice"; but for my use case, it was the best solution since I dont have access to the CSS files in the CMS I was working on. Couldn't I just use JavaScript? Sure, but why complicate things when you can achieve the same result with pure CSS and a little checkbox magic? It will also work on older browsers, which is a plus - if they have this feature supported, of course.

Since this is build up using inline styles, is not the best practice; but for my use case, it was the best solution. I hope you find this useful and can adapt it to your needs. If you have any questions or suggestions, feel free to reach out to me on LinkedIn.

Conclusion

The checkbox hack is a powerful tool that can be used to create a wide range of effects and interactions. It's a great way to add some interactivity to your website without relying on JavaScript. Using native CSS properties, a browser's built-in functionality, and a little creativity, you can create some pretty cool effects. I hope you find this example useful and can adapt it to your needs. If you have any questions or suggestions, feel free to reach out to me on LinkedIn / email / go to my landing page heggland.tech and click on the @ symbol to send me a message.

Bonus: Will this work with Internet Explorer?

I havent tested it, but if the checkbox hack is supported, it could work merhaps? 🤔 One would need to add "-ms" prefixes to the CSS properties and test it out; the property "-ms-grid-rows" has partial support says caniuse.com].