Slider Accordion Example

Demo for slider accordion.

HTML Code

<div id="gg-accordion-01" class="gg-accordion gg-panel-group">
    <div class="gg-panel">
        <div class="gg-panel-heading">
            <h4 class="gg-panel-title">
                <a data-toggle="gg.collapse">
                    <span class="gg-icon">
                        <i class="fa fa-plus-square gg-collapse"></i>
                        <i class="fa fa-minus-square gg-expand"></i>
                    </span>
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse in">
            <div class="gg-panel-body no-padding no-overflow" data-bg-image="assets/images/1.jpg"></div>
        </div>
    </div>

    <div class="gg-panel">
        <div class="gg-panel-heading">
            <h4 class="gg-panel-title">
                <a class="collapsed" data-toggle="gg.collapse">
                    <span class="gg-icon">
                        <i class="fa fa-plus-square gg-collapse"></i>
                        <i class="fa fa-minus-square gg-expand"></i>
                    </span>
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse">
            <div class="gg-panel-body no-padding no-overflow" data-bg-image="assets/images/2.jpg"></div>
        </div>
    </div>

    <div class="gg-panel">
        <div class="gg-panel-heading">
            <h4 class="gg-panel-title">
                <a class="collapsed" data-toggle="gg.collapse">
                        <span class="gg-icon">
                        <i class="fa fa-plus-square gg-collapse"></i>
                        <i class="fa fa-minus-square gg-expand"></i>
                    </span>
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse">
            <div class="gg-panel-body no-padding no-overflow" data-bg-image="assets/images/3.jpg"></div>
        </div>
    </div>
</div>

JavaScript Code

$('#gg-accordion-01').ggAccordion({
    theme: 'slate',
    slider: true,
    interval: 5000,
    horizontal: true,
    minHeight: 400,
    maxHeight: 500
});