Bootstrap 5 Accordion With Plus Minus

Bootstrap 5 Accordion With Plus Minus. In this accordion HTML, we do not need to add any JavaScript or jQuery code. It is a Bootstrap collapse panel with an open and close icon.

See More Accordion HTML

• Bootstrap 5 Accordion With Arrow Up And Down
• Smooth Accordion HTML And CSS Only
• Simple jQuery and CSS Accordion Toggle Code Snippet

Add HTML

<section class="mt-5">
    <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="#faq-content-1">
                            What is Lorem Ipsum?
                            </button>
                        </h2>
                        <div id="faq-content-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="#faq-content-2">
                            Why do we use it?
                            </button>
                        </h2>
                        <div id="faq-content-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="#faq-content-3">
                            Where does it come from?
                            </button>
                        </h2>
                        <div id="faq-content-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="#faq-content-4">
                            Where does it come from?
                            </button>
                        </h2>
                        <div id="faq-content-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="#faq-content-5">
                            Where does it come from?
                            </button>
                        </h2>
                        <div id="faq-content-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>

---

Add CSS

.accordion-collapse {
    border: 0;
}
.accordion-button {
    padding: 0px;
    font-weight: bold;
    border: 0;
    font-size: 18px;
    color: #333333;
    text-align: left;
    border-bottom: 1px solid #ddd; 
}
.accordion-button:focus {
    box-shadow: none;
    border: none;
}
.accordion-button:not(.collapsed) {
    background: none;
    color: #dc3545;
}
.accordion-body {
    padding: 15px;
    background-color: #f6f6f6;
}
.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);
}