Articles
Snippets
Categories
Quiz
Encryption
Base64 Encode
Base64 Decode
MD5 Hash
SHA1 Hash
SHA256 Hash
SHA512 Hash
URL Encode
URL Decode
Tools
Password generator
Character count
Json Formatter
JavaScript Formatter
HTML Formatter
CSS Formatter
Convert
XML to Json
Json to XML
Share your Articles
Login
Register
Works with Us
Bootstrap 5 accordion custom icon
HTML
<!doctype html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1 class="text-center m-3">Bootstrap Accordion</h1> <div class="container"> <div class="accordion" id="accordion"> <div class="accordion-item"> <h2 class="accordion-header" id="one"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="true" aria-controls="collapse-one"> Accordion 1 </button> </h2> <div id="collapse-one" class="accordion-collapse collapse show" aria-labelledby="one" data-bs-parent="#accordion"> <div class="accordion-body"> <p>This is accordion body.</p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="two"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="false" aria-controls="collapse-two"> Accordion 2 </button> </h2> <div id="collapse-two" class="accordion-collapse collapse" aria-labelledby="two" data-bs-parent="#accordion"> <div class="accordion-body"> <p>This is accordion body.</p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="three"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-three" aria-expanded="false" aria-controls="collapse-three"> Accordion 3 </button> </h2> <div id="collapse-three" class="accordion-collapse collapse" aria-labelledby="three" data-bs-parent="#accordion"> <div class="accordion-body"> <p>This is accordion body.</p> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
CSS
.accordion-button::after { background-image: url("https://hackthestuff.com/assets/images/logo.png"); } .accordion-button:not(.collapsed)::after { background-image: url("https://b.stripecdn.com/docs/assets/6bf407479706b31fa82c548be63edc52.png"); }
Javascript
Run Code
Copyright 2021 HackTheStuff
