This is the multi-page printable view of this section. Click here to print.

Return to the regular view of this page.

HTML

Bootstrap Inset Accordion

By snowdon.dev (hosting.snowdon.dev) |

Bootstrap’s inset accordion is a variation of the standard accordion component, designed to create a more seamless and nested experience within a UI. It is particularly useful when dealing with hierarchical content, allowing users to expand and collapse sections inside an already collapsible container.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Inset Accordion with Checkbox</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
         /* Inset Accordion Styling */
         .accordion {
             background-color: #f8f9fa;
             border-radius: 8px;
             padding: 10px;
         }
 
         .accordion-item {
             border: none;
             background: #fff;
             box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
             border-radius: 6px;
             margin-bottom: 5px;
         }
 
         .accordion-button {
             background: #f8f9fa;
             border: none;
             color: #495057;
             font-weight: bold;
             box-shadow: none;
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding-right: 10px; /* Adjust spacing */
         }
 
         /* Remove Bootstrap's default arrow icon */
         .accordion-button::after {
             display: none !important;
         }
 
         .accordion-button:not(.collapsed) {
             background: #e9ecef;
             color: #212529;
             box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
         }
 
         .accordion-body {
             background: #f8f9fa;
             box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
         }
 
         /* Checkbox Styling (Replacing Arrow) */
         .accordion-checkbox {
             display: none;
         }
 
         .accordion-checkbox-label {
             width: 18px;
             height: 18px;
             border: 2px solid #495057;
             border-radius: 4px;
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s;
         }
 
         .accordion-checkbox:checked + .accordion-checkbox-label::after {
             content: "✔";
             color: #495057;
             font-size: 12px;
             font-weight: bold;
         }
 
         .accordion-button span {
             flex-grow: 1;
             text-align: left;
         }
     </style>
 </head>
 <body>
     <div class="container mt-4">
         <div class="accordion" id="insetAccordion">
             <div class="accordion-item">
                 <h2 class="accordion-header">
                     <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                         <span>Accordion Item #1</span>
                         <input type="checkbox" id="toggleOne" class="accordion-checkbox">
                         <label for="toggleOne" class="accordion-checkbox-label"></label>
                     </button>
                 </h2>
                 <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#insetAccordion">
                     <div class="accordion-body">
                         This is the first item's accordion body.
                     </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="#collapseTwo">
                         <span>Accordion Item #2</span>
                         <input type="checkbox" id="toggleTwo" class="accordion-checkbox">
                         <label for="toggleTwo" class="accordion-checkbox-label"></label>
                     </button>
                 </h2>
                 <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#insetAccordion">
                     <div class="accordion-body">
                         This is the second item's accordion body.
                     </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="#collapseThree">
                         <span>Accordion Item #3</span>
                         <input type="checkbox" id="toggleThree" class="accordion-checkbox">
                         <label for="toggleThree" class="accordion-checkbox-label"></label>
                     </button>
                 </h2>
                 <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#insetAccordion">
                     <div class="accordion-body">
                         This is the third item's accordion body.
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>