Bootstrap 5 Collapsible Accordion With Plus Minus

Bootstrap 5 collapsible accordion with plus-minus icons CSS. Here we have used vertically collapsing bootstrap accordions and change the up-down arrow icons in plus-minus by using custom CSS.

HTML

<section class="py-5 bg-light">
     <div class="container">
         <div class="row">
             <div class="col-md-6 offset-md-3">
                 <div class="accordion accordion-flush" id="faqlist">
                     <div class="accordion-item">
                         <h2 class="accordion-header">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-1">
                             What is Lorem Ipsum?
                             </button>
                         </h2>
                         <div id="content-accordion-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                             <div class="accordion-body">
                                 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                             </div>
                         </div>
                     </div>
 
                     <div class="accordion-item">
                         <h2 class="accordion-header">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-2">
                             Why do we use it?
                             </button>
                         </h2>
                         <div id="content-accordion-2" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                             <div class="accordion-body">
                                 It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.
                             </div>
                         </div>
                     </div>
 
                     <div class="accordion-item">
                         <h2 class="accordion-header">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-3">
                             Where does it come from?
                             </button>
                         </h2>
                         <div id="content-accordion-3" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                             <div class="accordion-body">
                                 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                             </div>
                         </div>
                     </div>
 
                     <div class="accordion-item">
                         <h2 class="accordion-header">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-4">
                             Where does it come from?
                             </button>
                         </h2>
                         <div id="content-accordion-4" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                             <div class="accordion-body">
                                 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                             </div>
                         </div>
                     </div>
 
                     <div class="accordion-item">
                         <h2 class="accordion-header">
                             <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-5">
                             Where does it come from?
                             </button>
                         </h2>
                         <div id="content-accordion-5" class="accordion-collapse collapse" data-bs-parent="#faqlist">
                             <div class="accordion-body">
                                 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </section>

CSS

.accordion-collapse {
     border: 0;
 }
 .accordion-button:focus {
     box-shadow: none;
     border: none;
 }
 .accordion-button:not(.collapsed) {
     background: none;
     color: #ff9800;
     box-shadow: none;
     border-bottom: none;
 }
 .accordion-button::after {
     width: auto;
     height: auto;
     content: "+";
     font-size: 40px;
     background-image: none;
     font-weight: 100;
     color: #1b6ce5;
     transform: translateY(-4px);
 }
 .accordion-button:not(.collapsed)::after {
     width: auto;
     height: auto;
     background-image: none;
     content: "-";
     font-size: 48px;
     transform: translate(-5px, -4px);
     transform: rotate(0deg);
 }