Accordions

• Components

  • Headers
  • Footers
  • Parallax
  • Cards
  • Masonry Grid
  • Buttons
  • Form Elements
  • Carousel
  • Video Pop-up
  • Floating Divs
  • Overlays
  • Zoom Effect
  • Hover Animate
  • Morphext
  • Background
  • Hover Up
  • Blockquote
  • Pagination
  • Map
  • Accordions
  • Circle Block
  • Artworks
  • Spinners
  • Icon Boxes
  • Counters
  • Progress Bars
  • Helper Classes

• Plugins

  • Animations
  • Bootstrap
  • jQuery
  • Masonry
  • Morphext
  • Owl Carousel
  • Parallax
  • Wow
  • Progress Bar
  • ImagesLoaded
  • Popper
  • Waypoints
  • jQuery Forms
  • Google reCaptcha v2

Accordions Example

Bootstrap accordions can be modified using helper Classes and components. Here is an example of the use of .cl-card-square in accordions.

<div class="accordion mt-4" id="accordionExample-8">

    <!-- Question item starts -->
    <div class="card cl-card-square mb-2">
        <div class="card-header p-0 cl-bg-color-3" id="headingOne-8">
            <h5 class="mb-0">
                <a href="#" class="text-left cl-change-layout btn-block p-3" data-toggle="collapse" data-target="#collapseOne-8" aria-expanded="true" aria-controls="collapseOne-8">
                    1. When can I afford to retire?
                </a>
            </h5>
        </div>
        <div id="collapseOne-8" class="collapse show" aria-labelledby="headingOne-8" data-parent="#accordionExample-8">
            <div class="card-body cl-bg-color-3">
                Proin eu elit quis justo cursus maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            </div>
        </div>
    </div> <!-- Question item ends -->

    <!-- Question item starts -->
    <div class="card cl-card-square mb-2">
        <div class="card-header p-0 cl-bg-color-3" id="headingTwo-8">
            <h5 class="mb-0">
                <a href="#" class="text-left cl-change-layout btn-block p-3" data-toggle="collapse" data-target="#collapseTwo-8" aria-expanded="false" aria-controls="collapseTwo-8">
                    2. How much can I afford to invest?
                </a>
            </h5>
        </div>
        <div id="collapseTwo-8" class="collapse" aria-labelledby="headingTwo-8" data-parent="#accordionExample-8">
            <div class="card-body cl-bg-color-3">
                Proin eu elit quis justo cursus maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            </div>
        </div>
    </div> <!-- Question item ends -->

    <!-- Question item starts -->
    <div class="card cl-card-square mb-2">
        <div class="card-header p-0 cl-bg-color-3" id="headingThree-8">
            <h5 class="mb-0">
                <a href="#" class="text-left cl-change-layout btn-block p-3" data-toggle="collapse" data-target="#collapseThree-8" aria-expanded="false" aria-controls="collapseThree-8">
                    3. Do I currently have an estate tax liability?
                </a>
            </h5>
        </div>
        <div id="collapseThree-8" class="collapse" aria-labelledby="headingThree-8" data-parent="#accordionExample-8">
            <div class="card-body cl-bg-color-3">
                Proin eu elit quis justo cursus maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            </div>
        </div>
    </div> <!-- Question item ends -->

    <!-- Question item starts -->
    <div class="card cl-card-square mb-2">
        <div class="card-header p-0 cl-bg-color-3" id="headingFour-8">
            <h5 class="mb-0">
                <a href="#" class="text-left cl-change-layout btn-block p-3" data-toggle="collapse" data-target="#collapseFour-8" aria-expanded="false" aria-controls="collapseFour-8">
                    4. How do I value non-cash charitable contributions?
                </a>
            </h5>
        </div>
        <div id="collapseFour-8" class="collapse" aria-labelledby="headingFour-8" data-parent="#accordionExample-8">
            <div class="card-body cl-bg-color-3">
                Proin eu elit quis justo cursus maximus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
            </div>
        </div>
    </div> <!-- Question item ends -->

</div> <!-- Accordion ends -->