#SIMPLE CSS BUTTON ON OFF TOGGLE CODEPEN CODE#

The CSS status for a checked input is, not surprisingly, :checked… so we’ll use that to set the height of the inner to show all of its contents. Now we can get to our open / close routine. but we’ll see why a sibling selector is better choice in a moment. If you’re saying to yourself “Why not use an adjacent selector instead?” you’re right.

#SIMPLE CSS BUTTON ON OFF TOGGLE CODEPEN CODE#

It will provide the same result in your browser as the code above. First, we’re going to change the selector used above to be a little more precise: The inner will initially be hidden by the fact that we’re going to set its height to 0 and overflow property to hidden, so that content does not “spill out” of the and become visible: The outer will be styled as our window container element: Assuming that this could be a lot of content, I’ll place it inside its own. Directly underneath the checkbox, we’ll place the content that is going to be shown and hidden. I’ll place a checkbox element to act as our toggle switch inside a div with a class of window. In HTML5, they’re valid in almost any context. Two immediately spring to mind: radio buttons and checkboxes.

It seems obvious that in order to toggle a window event we need an HTML element that has distinct “on” and “off” states.

What follows are merely my thoughts, with a little form element accessibility trickiness, and what I think is a simpler and more elegant solution. :focus and :active might work, but then how do you get “back” from that state to close the element again?īefore I proceed it should be noted that I’m hardly the first to explore this area: notably, Corey Mwamba wrote a particularly good article on the subject over at the excellent Opera developer site. I suspect this is partly due to web developer’s unfamiliarity with CSS3, the ubiquity of JQuery, desire for support in older versions of IE, and confusion about what selector to use: we know we can use :hover to initiate such events, but :hover is not a click.

In the past, animated expansion and contraction of web page elements in response to user clicks has been tied to JavaScript, particularly JQuery and other frameworks.

Simple css button on off toggle codepen