ggAccordion.js - jQuery Plugin

Overview

It's a simple jQuery accordion collapsible plugin extended from Twitter Bootstrap's Collapse plugin that includes more features now like different color schemes, horizontal/vertical orientation, accordion slider, and stylish accordion navigation.

We have included inbuilt transition plugin for smoother transtion effects.

Data Attributes "data-"

You can use the HTML5 data- attributes (provided in the API reference) of any HTML element to set the different properties of ggAccordion.js.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus velit diam, finibus eget sapien ac, lobortis imperdiet est. Etiam tincidunt sed magna non tempus 
<div class="gg-accordion">
    <a role="button" data-toggle="gg.collapse" href="#targetElement_01" 
            aria-expanded="false" aria-controls="targetElement_01">
        Link with href
    </a>
    <div class="collapse" id="targetElement_01">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Phasellus velit diam, finibus eget sapien ac, lobortis imperdiet est. Etiam tincidunt sed magna non tempus
    </div>
</div>

<div class="gg-accordion">
    <button type="button" data-toggle="gg.collapse" data-target="#targetElement_01" 
            aria-expanded="false" aria-controls="targetElement_01">
        Button with data-target
    </button>
    <div class="collapse" id="targetElement_01">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Phasellus velit diam, finibus eget sapien ac, lobortis imperdiet est. Etiam tincidunt sed magna non tempus
    </div>
</div>

This plugin uses the HTML5 data-api that enables to maintain the validaity of HTML code elements w.r.t W3C validation standards.

jQuery API method

You can enable the collapsible behaviour with JavaScript:

// code to initialize with defaults
$('#gg-accordion-01').ggAccordion();
// "multiselectable" parameter with value "true"
$('#gg-accordion-01').ggAccordion({ multiselectable: true });
// multiple parameters
$('#gg-accordion-01').ggAccordion({ multiselectable: false, theme: 'trueblue', bordered: false });

API uses the default JSON based { key: value } comma-separated pairs of options to set the collapsible accordion properties.

Integration

You can find the plugin files in dist directory

ggaccordion/
├── dist/
    ├── ggAccordion.css
    ├── ggAccordion.min.css
    ├── ggAccordion.js
    ├── ggAccordion.min.js

CSS

Include the ggAccordion.css or ggAccordion.min.css inside the <head> tags as shown below:

<link href="css/ggAccordion.css" rel="stylesheet" />

JavaScript

Add the ggAccordion.js or ggAccordion.min.js at the bottom of your HTML page just above the closing </body> tag.

<script type="text/javascript" src="js/ggAccordion.js"></script>

HTML

After you are done with including CSS and JavaScript files you can add the following HTML markup in your page body:

Single Button or Link Example

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus velit diam, finibus eget sapien ac, lobortis imperdiet est. Etiam tincidunt sed magna non tempus 
<div class="gg-accordion">
    <a role="button" data-toggle="gg.collapse" href="#targetElement_01" 
            aria-expanded="false" aria-controls="targetElement_01">
        Link with href
    </a>
    <div class="collapse" id="targetElement_01">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Phasellus velit diam, finibus eget sapien ac, lobortis imperdiet est. Etiam tincidunt sed magna non tempus
    </div>
</div>

<div class="gg-accordion">
    <button type="button" data-toggle="gg.collapse" data-target="#targetElement_01" 
            aria-expanded="false" aria-controls="targetElement_01">
        Button with data-target
    </button>
    <div class="collapse" id="targetElement_01">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Phasellus velit diam, finibus eget sapien ac, lobortis imperdiet est. Etiam tincidunt sed magna non tempus
    </div>
</div>

Accordion Example

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div id="gg-accordion-02" 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">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </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">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </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">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>

Call Plugin Method

When you are done with adding above HTML markup code, you can call the ggAccordion method over that container element:

$('#gg-accordion-02').ggAccordion({
    multiselectable: false,
    theme: 'trueblue',
    gradient: true
});

You can insert the above code below the included ggAccordion.js script.

API Reference

Usage

The ggAccordion plugin utilizes a few CSS classes to handle the heavy lifting:

  • .collapse hides the content
  • .collapse.in shows the content
  • .collapsing is added when the transition starts, and removed when it finishes

Via data- attributes

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

multiselectable Option

If you will set multiselectable to false, then collapsible panels would behave like an accordion, it means one expanded panel at a time.

Via JavaScript

Enable manually with ggAccordion Method:

$('#my-ggAccordion').ggAccordion();

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-multiselectable="".

Name type default description
active boolean | number false Accepts index number of accordion item starting from 0 (zero). It activates the specified item of accordion panel.
multiselectable boolean false If true, then enables to expand multiple accordion panels otherwise only one panel can be expanded.
theme string default Accepts a name of theme presets provided with the ggAccordion.js plugin.
Here are the available themes:
  • mulberry,
  • orange,
  • pink,
  • slate,
  • trueblue,
  • turquoise,
  • vanilla,
  • ash,
  • chilired,
  • default,
  • forest,
  • golden,
  • khaki,
  • lavender
spacing number 1 Allows to add space between the accordion panels.
interval number 5000 Time interval in milliseconds for slider type accordion. It works with slider property as true.
slider boolean false Converts the ggAccordion into acordion type slider that automatically expands/collapses the panels with specified time interval.
loop boolean true When true, it enables to play the ggAccordion slider in a loop otherwise it stops after 1 cycle.
horizontal boolean false Enables to change the orientation of ggAccordion. If true then accordion becomes horizontal.
horizontalBreakpoint number 768 Enables to convert the horizontal orientation to default vertical accordion on small screens based on specified value as viewport screen size.
maxHeight boolean | number false Allows to specify a maximum height for the horizontal and slider ggAccordion.
minHeight boolean | number false Allows to specify a minimum height for the horizontal and slider ggAccordion.
bordered boolean true Enables to show/hide a bordered boundaries of ggAccordion and its panels.
gradient boolean true Enables/disables the gradient effect on applied ggAccordion theme.
radius boolean false Enables/disables the round edges of borders.
cache boolean true Works with AJAX content loading. If true then it caches the retrieved data on first call otherwise it fetches the fresh data on each call.
ajaxLoading string
loading...
AJAX loader animation that appears while fetching the data via AJAX call. 
<div class="gg-ajax-loading">
    <i class="fa fa-spinner fa-spin"></i> loading...
</div>
ajaxError string
error occurred
AJAX error text that appears if error occurs while fetching the data via AJAX call. 
<div class="gg-ajax-error">
    <i class="fa fa-exclamation-circle"></i> error occurred
</div>

Data attributes for multiple instances of ggAccordion

Options for individual ggAccordion can alternatively be specified through the use of data attributes, as explained above.

Data attributes having UPPER CASE letters

While specifying data-attributes which have upper case letter e.g.: horizontalBreakpoint
you can specify it like this: data-horizontal-breakpoint="768"

Other AJAX Parameters

There are few more AJAX parameters required for setting up AJAX call actions. You can specify these parameters in <a>element along with data-toggle="gg.collapse"inside .gg-panel-titlecontainer..

Name type default description
ajax-url string Accepts the page URL to fetch the information via AJAX call.
ajax-params JSON string Accepts a JSON based string of parameters. E.g.:
{ "id": "1", "action": "edit" }
ajax-method string GET Accepts http AJAX call method name e.g. GET or POST.
ajax-datatype string json Accepts dataType name based on the return mime type of data via AJAX call. E.g. json, html, xml, etc.
ajax-cache boolean If true then it caches the retrieved data on first call otherwise it fetches the fresh data on each call.
Overrides the parent cache option, otherwise inherits the parent cache option.

You can use the above parameters as like in following example code:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
<div id="gg-accordion-03" class="gg-accordion gg-panel-group">
    <div class="gg-panel">
        <div class="gg-panel-heading">
            <h4 class="gg-panel-title">
                <a class="collapsed" data-toggle="gg.collapse"
                    data-ajax-url="ajax/data.php"
                    data-ajax-method="POST"
                    data-ajax-params='{ "zone": "AJAX ZONE" }'
                    data-ajax-datatype="json">
                    <span class="gg-icon">
                        <i class="fa fa-plus-square gg-collapse"></i>
                        <i class="fa fa-minus-square gg-expand"></i>
                    </span>
                    AJAX Item
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse"></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>
                    Normal Item
                </a>
            </h4>
        </div>
        <div class="gg-panel-collapse collapse">
            <div class="gg-panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
            </div>
        </div>
    </div>
</div>

data-ajax-params attribute

Please note that, always use single quotes to specify the JSON string based parameters in data-ajax-params attribue, as shown in above code.

Methods

.ggAccordion(options)

Activates your content as a collapsible element. Accepts an optional options object.

$('#my-ggAccordion').ggAccordion({
    spacing: 2
});

.ggAccordion('toggle')

Toggles a collapsible element to shown or hidden. Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the shown.gg.collapse or hidden.gg.collapse event occurs).

.collapse('show')

Shows a collapsible element. Returns to the caller before the collapsible element has actually been shown (i.e. before the shown.gg.collapse event occurs).

.collapse('hide')

Hides a collapsible element. Returns to the caller before the collapsible element has actually been hidden (i.e. before the hidden.gg.collapse event occurs).

Events

ggAccordion's collapse class exposes a few events for hooking into collapse functionality.

Event Type Description
show.gg.collapse This event fires immediately when the showinstance method is called.
shown.gg.collapse This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hide.gg.collapse This event is fired immediately when the hidemethod has been called.
hidden.gg.collapse This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). 
$('#my-ggAccordion').on('hidden.gg.collapse', function () {
  // do something...
});

Examples

Vertical Accordion

Expands the collapsible panels in vertical direction

view

Horizontal Accordion

Expands the collapsible panels in horizontal direction

view

Slider Accordion

Timer based responsive accordion slider for text and images

view

Navigation Menu Accordion

Collapsible style navigation menu with sub navigation items

view

AJAX Accordion

Capable to load dynamic content via AJAX

view

Themes

Includes 14 color schemes for look and feel

view

Change Log

v1.0 December 07, 2016

1. Initial release of ggAccordion.js plugin.