Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Accordion Default

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion Default -->
        <div class="accordion accordion-default" id="accordionExample">
        
          <!-- Accordion item -->
          <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">Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" id="collapseOne">
              <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
    quia dolor sit amet, consecteturadipisci velit</div>
            </div>
          </div>
        
          <!-- Accordion item -->
          <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">Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" id="collapseTwo">
              <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
    quia dolor sit amet, consecteturadipisci velit</div>
            </div>
          </div>
        
          <!-- Accordion item -->
          <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">Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" id="collapseThree">
              <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
    quia dolor sit amet, consecteturadipisci velit</div>
            </div>
          </div>
        </div>
Accordion Flush

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion Flush -->
        <div class="accordion accordion-flush" id="accordionFlushExample">
        
          <!-- Accordion item -->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingFour">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingFour" data-bs-parent="#accordionFlushExample" id="collapseOne">
              <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
    quia dolor sit amet, consecteturadipisci velit</div>
            </div>
          </div>
        
          <!-- Accordion item -->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingFive">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionFlushExample" id="collapseTwo">
              <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
    quia dolor sit amet, consecteturadipisci velit</div>
            </div>
          </div>
        
          <!-- Accordion item -->
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingSix">
              <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionFlushExample" id="collapseThree">
              <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
    quia dolor sit amet, consecteturadipisci velit</div>
            </div>
          </div>
        </div>
Accordion With Shadow

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Shadow -->
    <div class="accordion accordion-shadow" id="accordionExample">
    
    <!-- Accordion item -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingSeven">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="true" aria-controls="collapseSeven">Accordion Item #1</button>
        </h2>
        <div class="accordion-collapse collapse show" aria-labelledby="headingSeven" data-bs-parent="#accordionExample" id="collapseSeven">
            <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit</div>
        </div>
    </div>
    
    <!-- Accordion item -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingEight">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">Accordion Item #2</button>
        </h2>
        <div class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#accordionExample" id="collapseEight">
            <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit</div>
        </div>
    </div>
    
    <!-- Accordion item -->
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingNine">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">Accordion Item #3</button>
        </h2>
        <div class="accordion-collapse collapse" aria-labelledby="headingNine" data-bs-parent="#accordionExample" id="collapseNine">
            <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
            doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
            quia dolor sit amet, consecteturadipisci velit</div>
        </div>
        </div>
    </div>
Accordion Flush With Shadow

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Shadow Two -->
    <div class="accordion accordion-shadow-two" id="accordionExample">
    
        <!-- Accordion item -->
            <div class="accordion-item">
            <h2 class="accordion-header" id="headingTen">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTen" aria-expanded="true" aria-controls="collapseTen">Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingTen" data-bs-parent="#accordionExample" id="collapseTen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingEleven">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEleven" aria-expanded="false" aria-controls="collapseEleven">Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingEleven" data-bs-parent="#accordionExample" id="collapseEleven">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwelve">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwelve" aria-expanded="false" aria-controls="collapseTwelve">Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwelve" data-bs-parent="#accordionExample" id="collapseTwelve">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>
Accordion WIth Text BG

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Text Background -->
    <div class="accordion accordion-textbg" id="accordionExample">
    
        <!-- Accordion item -->
        <div class="accordion-item mb-2">
            <h2 class="accordion-header" id="headingThirteen">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThirteen" aria-expanded="true" aria-controls="collapseThirteen">Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingThirteen" data-bs-parent="#accordionExample" id="collapseThirteen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item mb-2">
            <h2 class="accordion-header" id="headingFourteen">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFourteen" aria-expanded="false" aria-controls="collapseFourteen">Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingFourteen" data-bs-parent="#accordionExample" id="collapseFourteen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingFifteen">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFifteen" aria-expanded="false" aria-controls="collapseFifteen">Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingFifteen" data-bs-parent="#accordionExample" id="collapseFifteen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>
Accordion WIth Icon

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Icon -->
    <div class="accordion accordion-icon" id="accordionExample">
    
        <!-- Accordion item -->
        <div class="accordion-item mb-2">
            <h2 class="accordion-header" id="headingSixteen">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSixteen" aria-expanded="true" aria-controls="collapseSixteen"><i class="bi bi-lock-fill me-3"></i> Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingSixteen" data-bs-parent="#accordionExample" id="collapseSixteen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item mb-2">
            <h2 class="accordion-header" id="headingSeventeen">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeventeen" aria-expanded="false" aria-controls="collapseSeventeen"><i class="bi bi-receipt me-3"></i> Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingSeventeen" data-bs-parent="#accordionExample" id="collapseSeventeen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingEighteen">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEighteen" aria-expanded="false" aria-controls="collapseEighteen"><i class="bi bi-house me-3"></i> Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingEighteen" data-bs-parent="#accordionExample" id="collapseEighteen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>
Accordion WIth Icon Bg

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Icon Background -->
    <div class="accordion accordion-icon-background" id="accordionExample">
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingNineteen">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNineteen" aria-expanded="true" aria-controls="collapseNineteen"><i class="bi bi-lock-fill me-3"></i> Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingNineteen" data-bs-parent="#accordionExample" id="collapseNineteen">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwenty">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwenty" aria-expanded="false" aria-controls="collapseTwenty"><i class="bi bi-receipt me-3"></i> Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwenty" data-bs-parent="#accordionExample" id="collapseTwenty">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentyOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyOne" aria-expanded="false" aria-controls="collapseTwentyOne"><i class="bi bi-house me-3"></i> Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwentyOne" data-bs-parent="#accordionExample" id="collapseTwentyOne">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>
Accordion WIth Icon Left

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Icon Left -->
        <div class="accordion accordion-icon-left" id="accordionExample">
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentyTwo">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyTwo" aria-expanded="true" aria-controls="collapseTwentyTwo">Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingTwentyTwo" data-bs-parent="#accordionExample" id="collapseTwentyTwo">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentyThree">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyThree" aria-expanded="false" aria-controls="collapseTwentyThree">Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwentyThree" data-bs-parent="#accordionExample" id="collapseTwentyThree">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentyFour">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyFour" aria-expanded="false" aria-controls="collapseTwentyFour">Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwentyFour" data-bs-parent="#accordionExample" id="collapseTwentyFour">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>
Accordion WIth Number

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Number -->
        <div class="accordion accordion-number" id="accordionExample">
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentyFive">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyFive" aria-expanded="true" aria-controls="collapseTwentyFive"><span class="counter rounded-circle me-3">1</span> Accordion Item #1</button>
            </h2>
            <div class="accordion-collapse collapse show" aria-labelledby="headingTwentyFive" data-bs-parent="#accordionExample" id="collapseTwentyFive">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentySix">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentySix" aria-expanded="false" aria-controls="collapseTwentySix"><span class="counter rounded-circle me-3">2</span> Accordion Item #2</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwentySix" data-bs-parent="#accordionExample" id="collapseTwentySix">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    
        <!-- Accordion item -->
        <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingTwentySeven">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentySeven" aria-expanded="false" aria-controls="collapseTwentySeven"><span class="counter rounded-circle me-3">3</span> Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingTwentySeven" data-bs-parent="#accordionExample" id="collapseTwentySeven">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>
Accordion WIth Emphasize

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit

Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum quia dolor sit amet, consecteturadipisci velit
<!-- Accordion with Emphasize -->
        <div class="accordion accordion-emphasize" id="accordionExample">
    
            <!-- Accordion item -->
            <div class="accordion-item m-3">
                <h2 class="accordion-header" id="headingTwentyEight">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyEight" aria-expanded="true" aria-controls="collapseTwentyEight">Accordion Item #1</button>
                </h2>
                <div class="accordion-collapse collapse show" aria-labelledby="headingTwentyEight" data-bs-parent="#accordionExample" id="collapseTwentyEight">
                    <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                    quia dolor sit amet, consecteturadipisci velit</div>
                </div>
            </div>
    
            <!-- Accordion item -->
            <div class="accordion-item m-3">
                <h2 class="accordion-header" id="headingTwentyNine">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwentyNine" aria-expanded="false" aria-controls="collapseTwentyNine">Accordion Item #2</button>
                </h2>
                <div class="accordion-collapse collapse" aria-labelledby="headingTwentyNine" data-bs-parent="#accordionExample" id="collapseTwentyNine">
                    <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                    doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                    quia dolor sit amet, consecteturadipisci velit</div>
                </div>
            </div>
    
            <!-- Accordion item -->
            <div class="accordion-item m-3">
            <h2 class="accordion-header" id="headingThirty">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThirty" aria-expanded="false" aria-controls="collapseThirty">Accordion Item #3</button>
            </h2>
            <div class="accordion-collapse collapse" aria-labelledby="headingThirty" data-bs-parent="#accordionExample" id="collapseThirty">
                <div class="accordion-body">Nemo enim ipsam voluptatem quia voluptas sit aspernatur odit aut fugit, sed magni 
                doloresqui ratione voluptatem sequi nesciunt. Neque porro quisquam qui dolorem ipsum 
                quia dolor sit amet, consecteturadipisci velit</div>
            </div>
        </div>
    </div>