CMP003

Smooth Accordion

A sleek and responsive accordion component with smooth transitions

UI Components
Font Awesome Included: This snippet uses Font Awesome icons. The required stylesheet is automatically included at the top of the code block. If you are going to use this snippet in your project, add the stylesheet to your <head>.

Live Preview

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim diam ac enim finibus, ut luctus est porttitor. Etiam ultrices turpis tellus.

Section 2

Integer hendrerit nunc id metus faucibus, a vestibulum arcu lacinia. Cras vehicula interdum augue, a dapibus eros egestas nec.

Section 3

Praesent ullamcorper, dui at convallis aliquet, mauris massa varius justo, at condimentum ipsum lectus sit amet mi.

Code

HTML 
<!-- Font Awesome Icons; Make sure to add it in the <head> tag -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Section 1</h3>
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="accordion-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dignissim diam ac enim finibus, ut luctus est porttitor. Etiam ultrices turpis tellus.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Section 2</h3>
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="accordion-content">
      <p>Integer hendrerit nunc id metus faucibus, a vestibulum arcu lacinia. Cras vehicula interdum augue, a dapibus eros egestas nec.</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">
      <h3>Section 3</h3>
      <i class="fas fa-chevron-down"></i>
    </div>
    <div class="accordion-content">
      <p>Praesent ullamcorper, dui at convallis aliquet, mauris massa varius justo, at condimentum ipsum lectus sit amet mi.</p>
    </div>
  </div>
</div>
CSS 
.accordion {
  max-width: 500px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.accordion-item {
  background-color: #fff;
  color: #333;
  border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: #f8f8f8;
}

.accordion-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.accordion-header i {
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 20px;
}

.accordion-item.active .accordion-header {
  background-color: #f5f5f5;
}

.accordion-item.active .accordion-header i {
  transform: rotate(180deg);
}

.accordion-item.active .accordion-content {
  max-height: 200px;
  padding: 0 20px 15px;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  .accordion {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  .accordion-item {
    background-color: #2a2a2a;
    color: #fff;
    border-bottom: 1px solid #3a3a3a;
  }
  
  .accordion-header:hover {
    background-color: #333;
  }
  
  .accordion-item.active .accordion-header {
    background-color: #333;
  }
}
JavaScript 
// Add this JavaScript to make the accordion functional
document.addEventListener('DOMContentLoaded', function() {
  const accordionHeaders = document.querySelectorAll('.accordion-header');
  
  accordionHeaders.forEach(header => {
    header.addEventListener('click', function() {
      const item = this.parentElement;
      const isActive = item.classList.contains('active');
      
      // Close all items
      document.querySelectorAll('.accordion-item').forEach(accItem => {
        accItem.classList.remove('active');
      });
      
      // If the clicked item wasn't active, open it
      if (!isActive) {
        item.classList.add('active');
      }
    });
  });
});