Premium Smooth Animated Accordion

A uniquely sleek light-themed accordion component featuring fluid height transitions, nested structure support, and multiple-open toggles.

Forget clunky, rigid drops down lists. This Premium Smooth Animated Accordion rethinks the component entirely. It blends a clean, modern aesthetic with mathematical bezier curves to create a frictionless user experience!

Design Highlights

• Fluid Grid Heights: Utilizes modern CSS grid-template-rows transitioning between 0fr and 1fr to achieve perfectly smooth height expansion without relying on Javascript height calculations.
• Nested Architecture: Fully supports accordions inside accordions! The nested variants automatically adapt their background colors, borders, and margins to establish visual hierarchy.
• Contextual Animations: The chevron arrow features a spring-based rotation, and the borders highlight dynamically with elegant indigo tints based on open/hover states.
• Optionally Exclusive: Includes Javascript configuration to allow either “multiple panels open simultaneously” or “auto-close other panels”.

Code Snippet

The HTML Structure Wrap your items in an .acc-group. Each item requires an .acc-trigger and an .acc-content wrapper.

<div class="acc-group" data-allow-multiple="true">
  <div class="acc-item">
    <button class="acc-trigger">
      <span class="acc-title">What technologies are used?</span>
      <div class="acc-icon"><svg>...</svg></div>
    </button>
    
    <div class="acc-content">
      <div class="acc-content-inner">
        <!-- Add your text or nested accordions here -->
        <p>This utilizes HTML5, CSS Grid, and vanilla Javascript.</p>
      </div>
    </div>
  </div>
</div>

The CSS Grid Trick The secret to the smooth, Javascript-free height transition is CSS Grid paired with overflow hidden.

.acc-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              padding 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 1.5rem; /* No vertical padding when closed */
}

.acc-content-inner {
  min-height: 0; 
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
}

/* Open State */
.acc-item.is-open > .acc-content {
  grid-template-rows: 1fr;
  padding: 0 1.5rem 1.5rem 1.5rem; /* Expanding the vertical padding */
}

.acc-item.is-open > .acc-content > .acc-content-inner {
  opacity: 1;
  transform: translateY(0);
}

Simply import the code, throw it into your layout, and provide a world-class expansion experience to your users.