<div class="accordion accordion--style-3" id="collapseExample_1">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title ">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collapseExample_1" href="#collapseExample_1-1" aria-hidden="false" aria-expanded="true">
                    Toggle item #1
                </a>
            </h4>
        </div>
        <div id="collapseExample_1-1" class="panel-collapse collapse show">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collapseExample_1" href="#collapseExample_1-2">
                    Toggle item #2
                </a>
            </h4>
        </div>
        <div id="collapseExample_1-2" class="panel-collapse collapse">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="accordion accordion--style-4" id="collapse_2">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collapse_2" href="#collapse_2-1" aria-hidden="false" aria-expanded="true">
                    <span class="collapse-heading-icon">
                        <i class="ion ion-ios-chatboxes-outline"></i>
                    </span>
                    Toggle item #1
                </a>
            </h4>
        </div>
        <div id="collapse_2-1" class="panel-collapse collapse show">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collapse_2" href="#collapse_2-2">
                    <span class="collapse-heading-icon">
                        <i class="ion ion-ios-cog-outline"></i>
                    </span>
                    Toggle item #2
                </a>
            </h4>
        </div>
        <div id="collapse_2-2" class="panel-collapse collapse">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="accordion accordion--style-1 accordion-cards--spaced" id="collapse_3">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collapse_3" href="#collapse_3-1">
                    Toggle item #1
                    <span class="fa fa-chevron-down"></span>
                </a>
            </h4>
        </div>
        <div id="collapse_3-1" class="panel-collapse collapse show">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collapse_3" href="#collapse_3-2">
                    Toggle item #2
                    <span class="fa fa-chevron-right"></span>
                </a>
            </h4>
        </div>
        <div id="collapse_3-2" class="panel-collapse collapse">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>
</div>

<div class="accordion accordion--style-2 accordion-cards--spaced" id="collpase_4">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collpase_4" href="#collpase_4-1">
                    Toggle item #1
                    <span class="fa fa-chevron-down"></span>
                </a>
            </h4>
        </div>
        <div id="collpase_4-1" class="panel-collapse collapse show">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#collpase_4" href="#collpase_4-2">
                    Toggle item #2
                    <span class="fa fa-chevron-right"></span>
                </a>
            </h4>
        </div>
        <div id="collpase_4-2" class="panel-collapse collapse">
            <div class="card-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium lorem non vestibulum scelerisque. Proin a vestibulum sem, eget tristique massa. Aliquam lacinia rhoncus nibh quis ornare.
                </p>
            </div>
        </div>
    </div>
</div>