dynamic Jquery mobile accordion

Question

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');


}

score 3 · Accepted Answer · answered Mar 22 '13 at 03:08

3

You need to call collapsibleset() method on your outdiv

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

Working jsFiddle here

answered Mar 22 '13 at 03:08

peterm

91,357
15
148
157

great answer! Could you briefly explain why that's needed instead of the trigger? – Sam Mar 22 '13 at 03:15
They both work in jqm 1.2 and 1.3. `collapsibleset()` directly calls widget initialization method, `trigger('create')` triggers a `create` event but you need to use it **on a parent element** and it's good when you need to enhance more than one widget at a time. – peterm Mar 22 '13 at 03:42

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

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

edited May 23 '17 at 12:21

Community

1
1

answered Mar 22 '13 at 02:04

kevmc

1,284
7
8

score 0 · Answer 3 · answered Mar 22 '13 at 02:13

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"]');

score 0 · Answer 4 · edited Mar 04 '14 at 02:24

0

Change your code to:

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

You will have to download jQuery Mobile ver 1.3.2.

edited Mar 04 '14 at 02:24

user13500

3,817
2
26
33

answered Mar 04 '14 at 01:59

saoudPanizai

1
1

dynamic Jquery mobile accordion

4 Answers4