Example 1

Demo for navigation menu accordion.

HTML Code

<div id="gg-accordion-01" class="gg-accordion gg-panel-group gg-accordion-nav">
    <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 Nav Item #1
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse in">
            <div class="gg-panel-list">
                <ul>
                    <li><a href="#_">Nav Item #1</a></li>
                    <li class="active"><a href="#_">Nav Item #2</a></li>
                    <li><a href="#_">Nav Item #3</a></li>
                </ul>
            </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 Nav Item #2
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse">
            <div class="gg-panel-list">
                <ul>
                    <li><a href="#_">Nav Item #1</a></li>
                    <li><a href="#_">Nav Item #2</a></li>
                    <li><a href="#_">Nav Item #3</a></li>
                </ul>
            </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 Nav Item #3
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse">
            <div class="gg-panel-list">
                <ul>
                    <li><a href="#_">Nav Item #1</a></li>
                    <li><a href="#_">Nav Item #2</a></li>
                    <li><a href="#_">Nav Item #3</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="gg-panel">
        <div class="gg-panel-heading">
            <h4 class="gg-panel-title">
                <a class="collapsed" role="button" href="#_">
                    Non-Collapsible Nav Item #4
                </a>
            </h4>
        </div>
    </div>
</div>

JavaScript Code

$('#gg-accordion-01').ggAccordion({
    theme: 'slate',
    radius: true,
});