CODEWITHSUNDEEP
javascriptjqueryjquery-mobileaccordion
Sam
Sam

Reputation: 2347

dynamic Jquery mobile accordion

In trying to create a dynamic accordion with jquery, I can't figure out why the individual elements aren't collapsed. They just appear as text rather than taking on the accordion effect. Can anyone spot my mistake? (Assume that the data variables all contain data)

edit: I just tried it in firefox instead of chrome for curiosity's sake and the accordion behavior works..I don't get it

var outdiv = $('<div data-role="collapsible-set"></div>');

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

    var innerdiv = $('<div data-role="collapsible" data-collapsed="true" ></div>');
    innerdiv.append('<h3>' + 'Tweet #' + i + '</h3>');
    innerdiv.append('<p>' + data[i].text + '</p>');

    outdiv.append(innerdiv);

    outdiv.appendTo('#output');


}

Upvotes: 1

Views: 1248

Answers (4)

saoudPanizai
saoudPanizai

Reputation: 1

Change your code to:

outdiv.append(innerdiv).collapsibleset("refresh");

You will have to download jQuery Mobile ver 1.3.2.

Upvotes: 0

peterm
peterm

Reputation: 92805

You need to call collapsibleset() method on your outdiv

$('#output [data-role=collapsible-set]').collapsibleset();

Working jsFiddle here

Upvotes: 3

SomeShinyObject
SomeShinyObject

Reputation: 7811

I don't know if you can select a whole element this way or not, but you can also use jQuery's Attribute Contains Selector

//So your outdiv would become 
var outdiv = $('div[data-role*="collapsible-set"]');

//And then innerdiv, something like
var innerdiv = $('div[data-role*="collapsible"][data-collapsed*="true"]');

Upvotes: 0

kevmc
kevmc

Reputation: 1294

I'm not a jQuery mobile user but it looks to me like you need to set up the behaviours for your added content, something like $('#output').trigger('create') after your loop.

Its discussed more here

Upvotes: 0

Related Questions