State Variables in CSS

Question

I'm playing around with some Expand Boxes.

I'm trying to create an HTML + CSS Expand Box without using JavaScript.

For now my code looks something like this:

/* no js */

.expand_box{}
.expand_box > .expand_box_checkbox{
  display: none;
}
.expand_box > .expand_box_headline{}
.expand_box > .expand_box_content{
  display: none;
}
.expand_box > .expand_box_checkbox:checked + .expand_box_headline + .expand_box_content{
  display: block;
}

<div class="expand_box">
  <input  id="eb1" class="expand_box_checkbox" type="checkbox" />
  <label for="eb1" class="expand_box_headline">click me</label>
  <div class="expand_box_content">
    Content to see after clicking on "click me"
  </div>
</div>

Now, this is actually a nice solution, as it doesn't depend on JS and runs on practically every device.

What I am wondering about:

I am using the checkbox as a storage for state-information. But this piece of information technically doesn't belong into the HTML, as I only use it for styling.

Is there any way to keep track of the state "user activated the 'click me' button", using pure CSS?

I know of the existence of CSS-variables. Maybe I can use them in some way?

[CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) are used for data that will be reused throughout a stylesheet. They're actually a bit misnamed since they're more like "CSS Constants". — Heretic Monkey, Aug 15 '17 at 16:04
So you basically want to have an "click me" that when clicked twice doesn't hide the text? — Ezenhis, Aug 15 '17 at 16:06
It should work like that snippet: start: hide content 1. click: show content 2. click: hide content — Mile, Aug 15 '17 at 16:08

score 0 · Accepted Answer · answered Aug 15 '17 at 16:49

0

HTML5 has a native control for expand box. It's details/summary elements. In supporting browsers it doesn't need JS and needs CSS only for custom styling. It may need a bit of JS only to work in non-supporting browsers (as a polyfill).

Besides hidden checkbox hack, CSS itself has another possibility to "emulate" states with the very long transition delay (like described here, warning: the example uses unitless 0 value of transition-duration which seems not working anymore, but it works with 0s instead). But these solutions are also too hacky. CSS was never supposed to maintain states, but it's excellent in presenting them.

answered Aug 15 '17 at 16:49

Ilya Streltsyn

13,076
2
37
57

This is awesome. ty so much. I didn't know about
.
– Mile Aug 15 '17 at 17:27
Is it possible to css-select the
-box with a pseudo-selector to determine if it is opened or closed? I'd like to animate the content with a scrolldown-effect.
– Mile Aug 15 '17 at 17:51
Yes, `
` has the `open` attribute that reflects the open state, so you can target it from CSS. Here is another anwser with the example: https://stackoverflow.com/a/38215801/2533215
– Ilya Streltsyn Aug 17 '17 at 21:10
As "[]" is an attribute-selector, I thought, it wouldn't work, when the box is initially closed. It looks like it does though, which is awesome. Lots of thanks again! – Mile Aug 18 '17 at 16:05

State Variables in CSS

1 Answers1