Stylish Bootstrap 5 Accordion with Dark Theme and Custom Icons

Enhance your website with a sleek black Bootstrap 5 accordion. Features custom icons and a modern design, perfect for stylish and functional UI elements.

HTML

<section id="accordion_1">
    <div class="container">
        <div class="heading">
            <h2>Bootstrap 5 Accordion</h2>
        </div>
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        What is Lorem Ipsum?
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <p>
                            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, when an unknown printer took a galley of type and scrambled
                            it to make a type specimen book.
                        </p>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingTwo">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Why do we use it?
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <p>
                            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, content here', making it look like readable English.
                        </p>
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingThree">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Where does it come from?
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <p>
                            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. Richard McClintock, a Latin professor at
                            Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

#accordion_1{
     padding: 70px 0;
     background-color: #000;
}
 #accordion_1 .heading h2{
     color: #fff;
     margin-bottom: 50px;
}
 #accordion_1 .accordion{
     max-width: 70%;
     margin: 0 auto;
}
 #accordion_1 .accordion .accordion-button::after{
     content: "\f64d";
     font-family: bootstrap-icons !important;
     background: none;
     position: absolute;
     right: 0px;
     top: 0;
     background: #405df6;
     height: 100%;
     width: 50px;
     text-align: center;
     line-height: 50px;
     color: #fff;
     font-size: 20px;
     font-weight: 600;
     transform: none;
}
 #accordion_1 .accordion .accordion-button:not(.collapsed)::after{
     content: "\f63b";
}
 #accordion_1 .accordion .accordion-button, #accordion_1 .accordion .accordion-body{
     padding-right: 45px;
     background-color: #000;
     box-shadow: none;
}
 #accordion_1 .accordion .accordion-button{
     background: rgba(255, 255, 255, 0.1) !important;
     border-radius: 0;
     color: #fff;
}
 #accordion_1 .accordion .accordion-item{
     border-radius: 0;
     margin-bottom: 20px;
     border: 1px solid #000;
     background-color: #000;
}
 #accordion_1 .heading{
     text-align: center;
     margin-bottom: 30px;
}
 #accordion_1 .accordion .accordion-body p{
     color: #fff;
     opacity: .8;
}
 @media (max-width: 768px){
     #accordion_1 .accordion{
        max-width: 100%;
    }
}

JS

Width:

Height:

Elevate your website’s design with our stylish Bootstrap 5 accordion, tailored with a dark theme and vibrant custom icons. This accordion component offers a sleek black background with contrasting white text and button highlights, making it ideal for modern websites. The unique icon design adds a touch of sophistication while providing clear visual cues for expanding and collapsing sections. Perfect for showcasing FAQs or detailed content, this accordion ensures a polished and engaging presentation on both desktop and mobile devices. The responsive layout adapts seamlessly to various screen sizes, enhancing user interaction across all platforms.