Bootstrap Accordion Plus/Minus Icon Toggle

This guide shows you how to swap the default chevron or plus icon in a Bootstrap accordion to a plus/minus indicator that reflects the open/closed state. You’ll learn to use Bootstrap’s built-in collapse events and a small amount of CSS to make the icons update automatically when an accordion item is expanded or collapsed.

What You’ll Need

A basic HTML file with Bootstrap 5 (CSS and JavaScript) included via CDN or locally.
A text editor or code editor.
Familiarity with HTML structure and basic CSS.

Step-by-Step

Set up your HTML structure. Start with a standard Bootstrap accordion. Each accordion item has a header with a button and a collapse div. Your button should have a data-bs-toggle="collapse" attribute and the collapse div should have an id that matches the button’s data-bs-target.
Add an icon element. Inside the button, add a span or an i element that will serve as your icon. For a plus/minus effect, you can use Bootstrap Icons (e.g., bi-plus and bi-dash) or any other icon font. Alternatively, you can use a simple CSS-drawn plus sign.

Write the CSS for the plus/minus states. Create a CSS rule that hides the minus icon by default and shows the plus icon. When the accordion item is open, you’ll flip this. The most straightforward way is to use the .collapsed class that Bootstrap adds to the button when the corresponding collapse is hidden.

/* Default: plus icon visible, minus hidden */
.accordion-button .icon-minus { display: none; }
.accordion-button .icon-plus { display: inline; }

/* When collapsed, show plus, hide minus */
.accordion-button.collapsed .icon-minus { display: inline; }
.accordion-button.collapsed .icon-plus { display: none; }

Adjust the button’s default arrow. Bootstrap 5 adds a background arrow (chevron) to accordion buttons that rotates. To replace it with your plus/minus, you need to remove that arrow. Add this CSS:
```
.accordion-button::after { display: none; }
```
Test your accordion. Open the page in a browser and click the accordion headers. The plus/minus icon should change accordingly. If you’re using the .collapsed class approach, it should work without any JavaScript.

Alternative: Use JavaScript events. If you prefer a JavaScript solution (for example, if you want to animate the icon), you can use Bootstrap’s show.bs.collapse and hide.bs.collapse events. Add event listeners to each accordion item and toggle classes on the icon.

document.querySelectorAll('.accordion-item').forEach(item => {
  item.addEventListener('show.bs.collapse', () => {
    item.querySelector('.icon-plus').style.display = 'none';
    item.querySelector('.icon-minus').style.display = 'inline';
  });
  item.addEventListener('hide.bs.collapse', () => {
    item.querySelector('.icon-plus').style.display = 'inline';
    item.querySelector('.icon-minus').style.display = 'none';
  });
});

Common Mistakes

Not removing the default arrow. If you forget to hide the ::after pseudo-element, you’ll see both the chevron and your icon.
Using the wrong class. The .collapsed class is on the button, not the collapse div. Make sure your CSS targets .accordion-button.collapsed.
Icon markup errors. Ensure your icon spans are inside the button and have the correct classes (e.g., bi and bi-plus).
Forgetting to include Bootstrap JS. The accordion won’t toggle without Bootstrap’s JavaScript bundle.

Tips

Use CSS transitions. Add a transition property to your icons for a smooth fade or rotate effect.
Keep icons accessible. Add aria-hidden="true" to decorative icons so screen readers ignore them.
Test with keyboard navigation. Ensure the accordion still works with the Tab and Enter keys.
Use a single icon element. Instead of two separate icons, you can use one element and change its content or rotation with CSS.

Troubleshooting

The icon doesn’t change. First, check that the .collapsed class is being applied. Open your browser’s developer tools and inspect the button. If the class isn’t there, your Bootstrap JavaScript may not be loading. Also verify that your CSS is not being overridden by another rule (use specificity or !important if needed).

The default arrow still shows. Make sure your CSS rule to hide ::after is not overridden. Use .accordion-button::after { display: none !important; } if necessary.

Icons are misaligned. Use flexbox on the button to center the icon vertically. For example: .accordion-button { display: flex; align-items: center; }.

JavaScript solution not working. Ensure your script is placed after Bootstrap’s JS and that the DOM is fully loaded. Wrap your code in a DOMContentLoaded event listener if needed.

Frequently Asked Questions

Do I need to use Bootstrap Icons?

No, you can use any icon library (Font Awesome, Material Icons) or even plain text characters like + and −. Just adjust the class names in your CSS.

Can I use this method with Bootstrap 4?

Yes, the concept is the same, but Bootstrap 4 uses data-toggle instead of data-bs-toggle. The CSS classes are also slightly different (e.g., .card instead of .accordion-item).

Will this work with multiple accordion items open at once?

Yes, the .collapsed class is applied independently to each button, so the icon state will reflect each item’s open/closed status.

How do I change the icon size?

Add a font-size or width/height to the icon element. For Bootstrap Icons, you can use the fs-* utility classes (e.g., fs-4).

Can I animate the plus to a minus with a rotation?

Yes, instead of swapping icons, you can use a single icon and rotate it 45 degrees when open. For example, a plus icon rotated 45 degrees becomes an x, but you can also use a custom plus shape and rotate it to look like a minus.

Is there a way to do this without any CSS?

If you use the JavaScript event approach, you can directly change the icon’s class or innerHTML. However, you still need some CSS to hide the default arrow.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.

More cards in this drawer

The whole Numbers and Powers drawer →