Show / Hide Content

Toggle visibility of content using a checkbox and the ~ combinator.

Published May 19, 2026

Demo

Show content

This content was hidden until you clicked the button — no JavaScript needed.

HTML
				
				<input class="toggle-check" type="checkbox" id="shc1">
<label class="toggle-btn" for="shc1">Show content</label>
<div class="toggle-content">
  Hidden content here.
</div>

			

CSS
				
				.toggle-check {
  display: none;
}

.toggle-btn {
  display: inline-block;
  padding: .6rem 1.25rem;
  background: #5b4cdb;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

.toggle-content {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: #ede9ff;
  border-left: 4px solid #5b4cdb;
}

.toggle-check:checked ~ .toggle-content {
  display: block;
}

			

How it works

A hidden checkbox acts as state. The <label> becomes the clickable button. The ~ general sibling combinator lets CSS target elements that follow the checkbox in the DOM — so .toggle-check:checked ~ .toggle-content shows the panel when checked.