Inline Expand Accordion

An inline expand accordion built with pure HTML and CSS that reveals additional content directly within the existing layout flow. It maintains structural continuity and smooth expansion behavior without disrupting surrounding elements.

Usage

Use this component when interfaces require in place content expansion, such as FAQs, documentation details, settings descriptions, or expandable list items that should remain embedded within the page structure.

Implementation

The expansion behavior is handled using CSS state selectors and controlled height transitions, allowing content to expand smoothly without JavaScript. Layout integrity is preserved through consistent spacing and responsive styling.

HTML

<div class="accordion-inline">
  <button class="accordion-inline__header">Details</button>
  <div class="accordion-inline__content">
    <p>Expanded content</p>
  </div>
</div>

<div class="accordion-inline">
  <button class="accordion-inline__header">Details</button>
  <div class="accordion-inline__content">
    <p>Expanded content</p>
  </div>
</div>

CSS

.accordion-inline {
  width: 200px;
}

.accordion-inline__header {
  width: 100%;
  padding: 0.6rem;
  border-radius: 12px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.accordion-inline__content {
  margin-top: 0.25rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: #F1F6F9;
  color: #111827;
  font-size: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 180ms ease;
}

.accordion-inline:hover .accordion-inline__content {
  max-height: 80px;
  opacity: 1;
}

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

.accordion-inline {
  width: 200px;
}

.accordion-inline__header {
  width: 100%;
  padding: 0.6rem;
  border-radius: 12px;
  border: none;
  background: #6366f1;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
}

.accordion-inline__content {
  margin-top: 0.25rem;
  padding: 0.6rem;
  border-radius: 12px;
  background: #F1F6F9;
  color: #111827;
  font-size: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 220ms ease, opacity 180ms ease;
}

.accordion-inline:hover .accordion-inline__content {
  max-height: 80px;
  opacity: 1;
}

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

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Supports seamless inline content expansion
• Maintains layout flow stability
• Fully responsive across breakpoints
• Suitable for FAQs and documentation sections
• Easy to customize transition speed and spacing

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.