Click-to-Reveal

Content that reveals on click using a checkbox as state.

Published May 19, 2026

Demo

Reveal the answer

The answer to life, the universe, and everything is 42. All without JavaScript.

HTML
				
				<input class="reveal-check" type="checkbox" id="cr1">
<label class="reveal-btn" for="cr1">Reveal</label>
<div class="reveal-panel">Hidden content here.</div>

CSS
				
				.reveal-check { display: none; }

.reveal-btn {
  padding: .6rem 1.25rem;
  background: #1a1a2e;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.reveal-panel {
  display: none;
  margin-top: 1rem;
  padding: 1.25rem;
  background: #ede9ff;
  border-radius: 10px;
}

.reveal-check:checked ~ .reveal-btn {
  background: #5b4cdb;
}

.reveal-check:checked ~ .reveal-panel {
  display: block;
}

			

How it works

Identical in mechanism to Show/Hide Content — a hidden checkbox acts as a boolean state variable. The <label> is styled as a button. This example adds a visual state change on the button itself when checked, using :checked ~ .reveal-btn to restyle the trigger.