Your Business Name
Skip to main content

ContentToggle - Show/Hide Made Simple

Universal component for expandable code blocks and content sections. Zero CSS in your pages, full WCAG compliance built-in.

See ExamplesView API

Why Use ContentToggle?

Stop writing repetitive CSS for show/hide functionality. ContentToggle gives you:

  • Consistent dark code blocks across all showcase pages
  • WCAG AA compliant colors (works on all 8 theme presets)
  • Mobile-friendly with proper touch targets and horizontal scrolling
  • Native HTML <details> element (no JavaScript needed)

Code Snippet Examples

Basic Code Toggle

Perfect for showing copy-paste code examples in component showcases.

Show Code Example 
<BusinessInfo variant="full" />

Multi-Line Code

Longer examples automatically get horizontal scroll on mobile.

Show Advanced Example 
<Hero
  variant="centered"
  heading="Welcome to Our Site"
  description="A longer code example to demonstrate horizontal scrolling on mobile devices"
  buttonText="Get Started"
  buttonHref="/contact"
/>

Content Toggle Examples

Expandable Content

Use type="content" for regular HTML or markdown content.

Learn More About This Feature

This is regular content inside a toggle. It supports markdown, HTML, and all the typical prose styling.

The prose styling automatically adapts to light and dark modes, ensuring WCAG AA compliance across all 8 color presets.

  • Supports lists
  • Inline code like const x = 5;
  • Links and other HTML elements

Multiple Toggles

Stack multiple toggles with consistent spacing using space-y-4.

Component Import 
import ContentToggle from '@theme/components/ui/ContentToggle.astro';
Basic Usage 
<ContentToggle summary="Show Code" type="code" code="..." />
Content Usage 
<ContentToggle summary="Details" type="content">
  <p>Your content here</p>
</ContentToggle>

Component API

Props

  • summary (required): The clickable toggle text (e.g., "Show Code")
  • type: "code" or "content" (default: "content")
  • code: Code string (required when type="code")
  • background: "default" or "subtle" - adapts to section background

When to Use Which Background

  • background="default" - Use on white/slate-950 backgrounds (ContentSection background="default")
  • background="subtle" - Use on gray-50/slate-900 backgrounds (ContentSection background="subtle")

WCAG AA Compliance

Contrast Ratios

Code blocks:

  • Light mode: gray-100 on gray-900 (#f3f4f6 on #111827) = 15.68:1 ✓
  • Dark mode: gray-100 on slate-950 (#f3f4f6 on #020617) = 18.53:1 ✓

Summary text:

  • Light mode: gray-900 on gray-50 (#111827 on #f9fafb) = 18.53:1 ✓
  • Dark mode: white on slate-900 (#ffffff on #0f172a) = 17.39:1 ✓

Focus rings:

  • Uses theme color (--color-primary) - validated in all 8 presets ✓

Mobile:

  • 44x44px minimum touch targets ✓
  • Horizontal scroll for long code ✓

ContentToggle Features

Code Snippets

Dark code blocks with horizontal scrolling

Content Blocks

Prose styling for HTML and markdown

WCAG AA

15.68:1+ contrast ratios

Mobile Ready

44px touch targets, responsive

Ready to Use It?

Add ContentToggle to your showcase pages for consistent, accessible code examples with zero CSS.

See All UI Components Back to Components