Tone Shift Accordion

A tone shift accordion built with pure HTML and CSS that changes background or text styling when panels expand or collapse. It enhances visual state differentiation while maintaining a clean structural layout.

Usage

Use this component when interfaces require clear active section distinction, such as FAQ areas, documentation sections, or settings panels where visual tone changes improve user orientation.

Implementation

The tone transition is achieved using CSS state selectors and controlled background or typography shifts, paired with smooth transition effects. Responsive styling ensures consistent readability across devices.

HTML

<div class="accordion-tone">
  <button class="accordion-tone__header">Summary</button>
  <div class="accordion-tone__content">
    <p>Expanded content area.</p>
  </div>
</div>

<div class="accordion-tone">
  <button class="accordion-tone__header">Summary</button>
  <div class="accordion-tone__content">
    <p>Expanded content area.</p>
  </div>
</div>

CSS

.accordion-tone {
  width: 200px;
  border-radius: 16px;
  background: #f9fafb;
  overflow: hidden;
  transition: background 150ms ease;
}

.accordion-tone__header {
  width: 100%;
  padding: 0.6rem;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.accordion-tone__content {
  max-height: 0;
  overflow: hidden;
  padding: 0 0.6rem;
  font-size: 11px;
  color: #6b7280;
  transition: max-height 200ms ease, padding 200ms ease;
}

.accordion-tone:hover {
  background: #eef2ff;
}

.accordion-tone:hover .accordion-tone__content {
  max-height: 60px;
  padding: 0.4rem 0.6rem;
}

@media (prefers-color-scheme: dark) {
  .accordion-tone {
    background: #020617;
  }

  .accordion-tone:hover {
    background: #1e1b4b;
  }

  .accordion-tone__header {
    color: #e5e7eb;
  }

  .accordion-tone__content {
    color: #9ca3af;
  }
}

.accordion-tone {
  width: 200px;
  border-radius: 16px;
  background: #f9fafb;
  overflow: hidden;
  transition: background 150ms ease;
}

.accordion-tone__header {
  width: 100%;
  padding: 0.6rem;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
}

.accordion-tone__content {
  max-height: 0;
  overflow: hidden;
  padding: 0 0.6rem;
  font-size: 11px;
  color: #6b7280;
  transition: max-height 200ms ease, padding 200ms ease;
}

.accordion-tone:hover {
  background: #eef2ff;
}

.accordion-tone:hover .accordion-tone__content {
  max-height: 60px;
  padding: 0.4rem 0.6rem;
}

@media (prefers-color-scheme: dark) {
  .accordion-tone {
    background: #020617;
  }

  .accordion-tone:hover {
    background: #1e1b4b;
  }

  .accordion-tone__header {
    color: #e5e7eb;
  }

  .accordion-tone__content {
    color: #9ca3af;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses dynamic tone based state changes
• Enhances active panel visibility
• Fully responsive across breakpoints
• Suitable for FAQs and documentation layouts
• Easy to customize color and transition timing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.