Advanced User Interface Controls and Components

IntegralUI Web

Documentation and API Reference


Loads data from local or remote data source into Accordion.


dataArrayAn array of group objects from local or remote data source

Return Value

This method does not return a value.

You can use this method to load data on demand, updating the whole Accordion in the process.

Version Information

Supported in: v1.0.


In this example we are showing how to use loadData method to populate the Accordion from remote data source. Data source in this case is a JSON file which contains a flat list of group objects. Any existing groups in Accordion, will be automatically removed.

$(document).ready(function() {

// Create an instance of Accordion widget

var $bar = $('#accordion').accordion({

expandDirection: 'right',

headerContentOrientation: 'vertical',

showExpandBox: false



// Use jQuery getJSON method to read the content of JSON file and then use loadData method to populate the Accordion widget

$.getJSON("data.json", function(data){

$bar.accordion('loadData', data);



<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.accordion.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.core.min.js"></script>

<script type="text/javascript" src="external/jquery.ui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.widget.min.js"></script>

<script type="text/javascript" src="js/jquery.integralui.accordion.min.js"></script>



<div id="accordion" class="widget"></div>





width: 300px;

height: 300px;



{ "id": "1", "text": "Dairy" },

{ "id": "2", "text": "Fruits" },

{ "id": "3", "text": "Grains" },

{ "id": "4", "text": "Meat" },

{ "id": "5", "text": "Sweets" },

{ "id": "6", "text": "Vegetables" },

{ "id": "7", "text": "Water" }



See Also