Can You Show and Hide Divs with CSS Only?

Show and Hide Divs with CSS Only

Want to show or hide divs based on user input, but with CSS only? Let's find out how to achieve this without relying on JavaScript.

Problem Statement:

The user wants to show and hide divs on click using only CSS. Although jQuery is currently being used, they prefer an accessible solution that works even with JavaScript disabled.

CSS-Only Solution: Checkbox Hack

For a pure CSS solution, consider the checkbox hack. This method involves using a checkbox to control the display of divs. When the checkbox is checked, one set of styles is applied, and when it's unchecked, another set is used. The :checked pseudo selector is used to differentiate between these states.

To hide the checkbox for aesthetic purposes, attach it to a label.

Demo and Resources

• [Dabblet Demo](http://dabblet.com/gist/1506530)
• [CSS Tricks Article on Checkbox Hack](http://css-tricks.com/the-checkbox-hack/)

The above is the detailed content of Can You Show and Hide Divs with CSS Only?. For more information, please follow other related articles on the PHP Chinese website!