How to customize the Bootstrap accordion

Customize accordion header and body styles using CSS to modify background, color, borders, and typography. 2. Replace default arrows with custom icons like plus/minus by integrating Bootstrap Icons and toggling via CSS content. 3. Adjust spacing and borders by removing default styles and applying box-shadow, borderRadius, and margins for a card-like design. 4. Optionally customize collapse animation speed using transition properties or disable it with JavaScript. 5. Ensure only one panel opens at a time by using data-bs-parent to group accordion items. 6. Allow multiple panels to remain open by removing or modifying the data-bs-parent attribute in HTML or JavaScript. Customization is achieved through CSS overrides and minor HTML or JavaScript adjustments, enabling a fully branded and user-friendly accordion component.

Customizing the Bootstrap accordion is a common task when you want to match it to your site’s design or improve usability. Whether you're using Bootstrap 4 or 5, the default accordion can be styled and modified with a mix of CSS overrides and optional JavaScript tweaks. Here's how to do it effectively.

1. Change Accordion Header and Body Styling

The default accordion uses subtle styling. To make it stand out, start by customizing the header (button) and body (collapse content).

/* Customize accordion button */
.accordion-button {
  background-color: #f8f9fa;
  color: #212529;
  font-size: 1rem;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  margin-bottom: 8px;
}

/* Remove default focus outline or style it */
.accordion-button:focus {
  box-shadow: none;
  border-color: #007bff;
}

/* Style active (open) state */
.accordion-button:not(.collapsed) {
  background-color: #e9ecef;
  color: #0056b3;
  box-shadow: none;
}

/* Customize accordion body */
.accordion-body {
  background-color: #ffffff;
  border-top: 1px solid #dee2e6;
  padding: 1rem;
  font-size: 0.95rem;
  color: #495057;
}

Note: The .not(.collapsed) class is automatically toggled by Bootstrap’s JavaScript to indicate open panels.

2. Remove Default Arrow and Add Custom Icons

Bootstrap uses a background chevron that rotates on open/close. You can replace it with custom icons (e.g., plus/minus) using Font Awesome or Bootstrap Icons.

Example using Bootstrap Icons:

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">

Update your accordion button:

<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
  Section 1 
  <i class="bi bi-plus-circle ms-auto"></i>
</button>

Then use CSS to swap icons based on state:

.accordion-button:not(.collapsed) .bi-plus-circle::before {
  content: "\f18c"; /* minus-circle icon */
}

.accordion-button.collapsed .bi-plus-circle::before {
  content: "\f18e"; /* plus-circle icon */
}

Alternatively, you can hide the default icon and manage visibility with two separate icons.

3. Adjust Spacing and Borders

Control the overall look by adjusting padding, margins, and borders.

.accordion-item {
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 10px;
}

.accordion-header {
  border-bottom: none;
}

This gives a more modern, card-like appearance.

4. Customize Collapse Animation (Optional)

Bootstrap uses CSS transitions for collapsing. You can tweak the speed:

.accordion-collapse {
  transition: height 0.3s ease;
}

Or disable animation entirely by removing the collapse class and handling it via JavaScript.

5. Make It Always Open One Panel (Default Behavior)

This is already default in Bootstrap, but ensure you’re using data-bs-parent to link panels:

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-controls="collapseOne" data-bs-parent="#myAccordion">
        Section 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">Content 1</div>
    </div>
  </div>
  <!-- More items -->
</div>

The data-bs-parent ensures only one panel opens at a time.

6. Optional: Allow Multiple Panels Open

Remove data-bs-parent or set it to a different container or null in JavaScript:

// Allow multiple open panels
document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    // Do not enforce parent grouping
  });
});

Or simply omit data-bs-parent from the HTML.

Customizing the Bootstrap accordion doesn’t require overriding JavaScript—just smart CSS and minor HTML tweaks. Focus on the .accordion-button, .accordion-body, and parent .accordion-item classes, and you can achieve a fully branded look. Basically, just override the styles you don’t like and enhance the interaction with icons or animations.

The above is the detailed content of How to customize the Bootstrap accordion. For more information, please follow other related articles on the PHP Chinese website!