CODEWITHSUNDEEP
jqueryjquery-mobile
user1542984
user1542984

Reputation:

jquery mobile accordion not working (not display)

I am making a simple example in accordion.Actually my list is noy display when I used dynamically data . I want to make demo as shown below.

here is my code http://jsfiddle.net/3H87k/

var name = new Array();
name[0] = "Saab";
name[1] = "Volvo";
name[2] = "BMW";
name[3] = "BOW";
name[4] = "BLW";

var address = new Array();
address[0] = "Sjnnnnvvf";
address[1] = "Vtyubolvo";
address[2] = "BhjhubbMW";
address[3] = "ftyui";
address[4] = "fybmi";

$(document).ready(function () {
    for(var i=0;i<name.length;i++){
        $('#folderData').append('<div data-role="collapsible"<h3>'+
                                name[i]+'</h3>'+
    '<p>'+address[i]+'</p>'+
    '</div>');
    }

    // Refreshing the list
   // $('#folderData').listview('refresh');
}); 
$(document).on('click','.rowclick',function(){
     $('.ui-li-heading').removeClass('selected');
  $(this).find('.ui-li-heading').addClass('selected'); 
});

Upvotes: 2

Views: 399

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You are missing a > in your collapsible div definition.

Aside that for dynamically added elements you have to force the collapsible on your elements.

Code:

$('#folderData').find('div[data-role=collapsible]').collapsible();

Demo: http://jsfiddle.net/8mWZv/

Theming Overview

jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a "swatch". The framework comes with five defined themes (swatches "a" to "e") which can be used readily, removed, or overwritten.

Ref: https://learn.jquery.com/jquery-mobile/theme-roller/

So you can build your custom style.

Upvotes: 1

Related Questions