Expansion Panels

Name: Rence Material
Author: david abalaku

Expansion panels allow lightweight editing and creation flows. They summary key information when collapsed and provide detailed controls when expanded.

Collapsible hierarchy!

Standard Panel

Clean summaries

General Settings

Customize your system behavior

Use .expansion-panel with Bootstrap's .collapse to create accordion-like workflows.

Animated Transitions!

HTML

<!-- Material Expansion Panel -->
<div class="expansion-panel bg-white shadow-sm border rounded-4 mb-3 overflow-hidden">
  <div class="expansion-panel-header px-4 py-3 d-flex justify-content-between align-items-center cursor-pointer" data-bs-toggle="collapse" data-bs-target="#panel1">
    <div>
      <h6 class="mb-0 fw-bold text-dark">Personal Info</h6>
      <small class="text-muted">Manage your identity and contact data</small>
    </div>
    <i class="material-icons">expand_more</i>
  </div>
  <div id="panel1" class="collapse">
    <div class="expansion-panel-body px-4 py-4 border-top">
      Content goes here...
    </div>
  </div>
</div>