Dynamically Add in jQuery Mobile Attributes

Question

I am adding in jQuery mobile attributes dynamically. I have had luck with some of them. However I can't seem to figure out how to add in data-type="horizontal" properly.

This code works perfectly:

$("form, fieldset, #info_list").collapsible();
$("#color_group, #animal_group").controlgroup();

I want #color_group & #animal_group to have the attribute data-type="horizontal". I couldn't find any methods like the ones for controlgroup & collapsible, though; so I tried this:

$("#color_group, #animal_group").attr("data-type", "horizontal");

This adds the attribute, however using this method jQuery mobile does nothing with it when it's added in this way.

Answer 1

DEMO

the controlgroup widget has a 'type' option you can set to horizontal ( http://api.jquerymobile.com/controlgroup/ )

$("#color_group, #animal_group").controlgroup({ type: "horizontal" });

Answer 2

Use .controlgroup({ type: "horizontal" }) or "vertical" to change type, not data-type .

$("controlgroup_ID").controlgroup({
    type: "horizontal"
});

$("controlgroup_ID").controlgroup({
    type: "vertical"
});

Demo