Show More / Show Less Using CSS (No JavaScript)

The show more / show less pattern is widely used to control long content blocks without overwhelming users. While this is often implemented using JavaScript, modern CSS alone can handle most real‑world cases efficiently, with better performance and fewer moving parts.

This article covers pure CSS techniques, accessibility notes, limitations, and production‑ready patterns.

Why Prefer CSS Over JavaScript

• Zero runtime scripting
• Faster rendering and lower CLS risk
• Works even if JS fails
• Easier to maintain

If your requirement is simple content toggling, CSS is usually sufficient.

Method 1: Checkbox Hack (Most Flexible)

This is the most common and reliable CSS‑only approach.

HTML

<input type="checkbox" id="toggle" hidden>

<div class="content">
  <p>
    This is long content that should be partially hidden by default.
    Additional text becomes visible when expanded.
  </p>
</div>

<label for="toggle" class="toggle-btn"></label>

<input type="checkbox" id="toggle" hidden>

<div class="content">
  <p>
    This is long content that should be partially hidden by default.
    Additional text becomes visible when expanded.
  </p>
</div>

<label for="toggle" class="toggle-btn"></label>

CSS

.content {
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#toggle:checked ~ .content {
  max-height: 1000px;
}

.toggle-btn::after {
  content: "Show more";
  cursor: pointer;
  color: #2563eb;
}

#toggle:checked + .content + .toggle-btn::after {
  content: "Show less";
}

.content {
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#toggle:checked ~ .content {
  max-height: 1000px;
}

.toggle-btn::after {
  content: "Show more";
  cursor: pointer;
  color: #2563eb;
}

#toggle:checked + .content + .toggle-btn::after {
  content: "Show less";
}

How It Works

• Uses a hidden checkbox as state
• :checked controls visibility
• max-height enables smooth animation

This approach relies on CSS selectors and pseudo-classes.

Method 2: <details> and <summary> (Semantic & Accessible)

HTML provides a native toggle mechanism.

HTML

<details>
  <summary>Show more</summary>
  <p>
    Hidden content appears here when expanded.
  </p>
</details>

<details>
  <summary>Show more</summary>
  <p>
    Hidden content appears here when expanded.
  </p>
</details>

Styling with CSS

details summary {
  cursor: pointer;
  color: #2563eb;
}

details[open] summary {
  font-weight: 600;
}

details summary {
  cursor: pointer;
  color: #2563eb;
}

details[open] summary {
  font-weight: 600;
}

Advantages

• Built‑in accessibility
• Keyboard and screen‑reader friendly
• No hacks or hidden inputs

This element is part of modern HTML5 and styled using standard CSS properties such as cursor and font-weight.

Method 3: Line Clamp (Text‑Only Expansion)

Best for previews, descriptions, and excerpts.

CSS

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

This does not provide toggling by itself. It is commonly paired with Method 1 for a complete solution.

The -webkit-line-clamp property is part of advanced CSS text handling.

Animation Considerations

CSS cannot animate from height: auto. Use:

• max-height with a safe upper bound
• opacity for subtle effects

.content {
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.content {
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

Refer to CSS transitions behavior.

Accessibility Notes

• Prefer <details> when possible
• Ensure clickable labels are keyboard accessible
• Avoid hiding focusable elements

Accessibility rules are tightly coupled with CSS display and visibility properties.

When CSS Is Not Enough

Use JavaScript if you need:

• Dynamic content injection
• URL‑based state
• Analytics‑driven interaction
• Complex height calculations

For everything else, CSS‑only show more / show less is production‑ready.

Final Recommendation

• Use <details> for articles and FAQs
• Use checkbox toggle for custom UI
• Use line clamp for previews

Minimal CSS. Predictable behavior. Better performance.

Nasim Khan

I’m Nasim Khan, is a Software Engineer focused on building efficient and user-friendly web applications. SHe writes about web development, programming fundamentals, and modern technologies, sharing practical insights for developers and learners.