Remote Data Binding in Accordion for jQuery

Created: 03 September 2014

The content of Accordion widget can be entirely created only using HTML5 elements. However, to further enhance its functionality, like remotely binding data using a JSON file as a data source, we need to use jQuery. The next sections describe in details how to bind data to the Accordion on demand, using a several different JSON files.

More Demos

Download

Accordion is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

Our first example will consists of a simple JSON data structure, which contains only text values for group headers and their content.

JSON

[

{ "text": "Group1", "content": "The Group1 content" },

{ "text": "Group2", "content": "The Group2 content" },

{ "text": "Group3", "content": "The Group3 content" },

{ "text": "Group4", "content": "The Group4 content" },

{ "text": "Group5", "content": "The Group5 content" }

]

As it can be seen from our sample data, each group has its title set to some value, and as content we are using a single sentence.

Now that we have our data structure set, we can use the jQuery getJSON method to load it from a remote JSON file into the Accordion.

$(document).ready(function(){

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

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

$bar.accordion('clearGroups');

$.each(data, function(id, group){

$bar.accordion('addGroup', group);

});

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

</style>

In our second example, we will create a JSON data structure which contains a custom content for each group in Accordion widget. Also each group has an icon, which will be displayed in header before its title.

$(document).ready(function(){

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

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

$bar.accordion('clearGroups');

$.each(data, function(id, group){

$bar.accordion('addGroup', group);

});

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

</style>

[

{ "icon": "<img src='images/browser.png' />", "text": "Header1", "content": "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>" },

{ "icon": "<img src='images/calendar.png' />", "text": "Header2", "content": "<p>Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.</p>" },

{ "icon": "<img src='images/bar-chart.png' />", "text": "Header3", "content": "<p>Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst. Vivamus facilisis diam at odio.</p>" }

]

In both cases so far we have only created data which describes the groups inside our Accordion. We can also set various properties of Accordion widget in a JSON file, and when data is loaded, it will modify its layout and appearance.

In our last example we will set the expandDirection property to 'up', which enables for Accordion to expand its groups upwards. Additionally, we are also setting the hoverSelection property to true. This enables groups to expand when mouse cursor hovers over their header.

$(document).ready(function(){

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

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

$bar.accordion('clearGroups');

$.each(data, function(id, obj){

switch (id){

case 0: // Options

for (var i = 0; i < obj.options.length; i++){

if (obj.options[i].expandDirection)

$bar.accordion("option", "expandDirection", obj.options[i].expandDirection);

if (obj.options[i].hoverSelection)

$bar.accordion("option", "hoverSelection", obj.options[i].hoverSelection);

}

break;

case 1: // Groups

for (var i = 0; i < obj.groups.length; i++)

$bar.accordion('addGroup', obj.groups[i]);

break;

}

});

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

.widget

{

width: 300px;

height: 300px;

}

</style>

[

{ "options": [

{ "expandDirection": "up" },

{ "hoverSelection": true }

]

{ "groups": [

{ "text": "Dairy", "content": "The Dairy content" },

{ "text": "Fruits", "content": "The Fruits content" },

{ "text": "Grains", "content": "The Grains content" },

{ "text": "Meat", "content": "The Meat content" },

{ "text": "Vegetables", "content": "The Vegetables content" }

]

}

]

You can create as many different data structures as you need containing information about layouts or visual appearance, depending on your web application requirements. For example change of Accordion appearance using different CSS styles all set in remote data source, is possible. For more information about using different CSS styles check out this article: Using Different Colors for Each Group Header.

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name:	Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.

Remote Data Binding in Accordion for jQuery

Newsletter

Other Articles