Accordion

An accordion is a vertically stacked set of interactive headings that each contain a title and content snippet representing a section of content.

Accordion Properties


Component Modifier [MODIFIER]

Optionally add an overall modifier class to the component.

Template
    
      <div class="accordion [MODIFIER]" id="[ACC_ID]">
        <div class="accordion-item">
          <h3 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#[ACC_ID]0" aria-expanded="true" aria-controls="[ACC_ID]0">[ACC_LABEL]</button>
          </h3>
          <div id="[ACC_ID]0" class="accordion-collapse collapse show" data-bs-parent="#[ACC_ID]">
            <div class="accordion-body">
              ...
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h3 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#[ACC_ID]0" aria-expanded="false" aria-controls="[ACC_ID]0">[ACC_LABEL]</button>
          </h3>
          <div id="[ACC_ID]0" class="accordion-collapse collapse" data-bs-parent="#[ACC_ID]">
            <div class="accordion-body">
              ...
            </div>
          </div>
        </div>
      </div>

Accordion Example

View in new window
View in new window for full preview
      
        <div class="accordion" id="exampleAcc">
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc0" aria-expanded="true" aria-controls="exampleAcc0">
          Accordion Item 1
        </button>
      </h3>
      <div id="exampleAcc0" class="accordion-collapse collapse show" data-bs-parent="#exampleAcc">
        <div class="accordion-body">
        <p class="h5">Accordion Item #1 content area</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis, laborum architecto enim reprehenderit veniam, labore corrupti id iste animi ipsa repudiandae. Obcaecati, eius fugit inventore sunt repudiandae corporis! Doloribus.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc1" aria-expanded="false" aria-controls="exampleAcc1">
          Accordion Item 2
        </button>
      </h3>
      <div id="exampleAcc1" class="accordion-collapse collapse" data-bs-parent="#exampleAcc">
        <div class="accordion-body">
        <p class="h5">Accordion Item #2 content area</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis, laborum architecto enim reprehenderit veniam, labore corrupti id iste animi ipsa repudiandae. Obcaecati, eius fugit inventore sunt repudiandae corporis! Doloribus.</p>
        </div>
      </div>
    </div>
    <div class="accordion-item">
      <h3 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleAcc2" aria-expanded="false" aria-controls="exampleAcc2">
          Accordion Item 3
        </button>
      </h3>
      <div id="exampleAcc2" class="accordion-collapse collapse" data-bs-parent="#exampleAcc">
        <div class="accordion-body">
        <p class="h5">Accordion Item #3 content area</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius debitis, laborum architecto enim reprehenderit veniam, labore corrupti id iste animi ipsa repudiandae. Obcaecati, eius fugit inventore sunt repudiandae corporis! Doloribus.</p>
        </div>
      </div>
    </div>
  </div>
  
  
  
  
  <div class="kb-tabs-x">
    <ul class="nav nav-" id="" role="tablist">
    </ul>
    <div class="tab-content" id="Content">
    </div>
  </div>