CODEWITHSUNDEEP
dojo
Eugene
Eugene

Reputation: 343

Dojox Accordion - uncollapsed panes on add to accordion

I'm using dojox/mobile/Accordion and have added some panes to it.

Is there a property I can set on a pane(ContentPane) or an Accordion so that as the panes get added they are added not collapsed?

<div data-dojo-type="dojox/mobile/Accordion" data-dojo-props='singleOpen:false, iconBase:"images/icons16.png"'>
    <div data-dojo-type="dojox/mobile/ContentPane"
         data-dojo-props='label:"External Content1", iconPos1:"16,32,16,16", href:"data/fragment1.html"'>
    </div>
    <div data-dojo-type="dojox/mobile/ContentPane"
         data-dojo-props='label:"External Content2", iconPos1:"16,32,16,16", href:"data/fragment2.html"'>
    </div>
    <div data-dojo-type="dojox/mobile/ContentPane"
         data-dojo-props='label:"External Content3", iconPos1:"16,32,16,16", href:"data/fragment3.html"'>
    </div>
    <div data-dojo-type="dojox/mobile/ContentPane"
         data-dojo-props='label:"External Content4", iconPos1:"16,32,16,16", href:"data/fragment4.html"'>
    </div>
</div>

Thanks

Upvotes: 0

Views: 197

Answers (2)

Thomas Upton
Thomas Upton

Reputation: 1899

You can use the selected parameter for your child panes. See this fiddle for an example; you just add selected: true to your data-dojo-props attribute or the properties that you pass to the child widget constructor if doing it programmatically:

Declaratively

<div data-dojo-type="dojox/mobile/ContentPane"
     data-dojo-props="label: 'External Content1',
                      iconPos1: '16,32,16,16',
                      href: 'data/fragment1.html',
                      selected: true">
</div>

Programmatically

require([
    "dojox/mobile/Accordion",
    "dojox/mobile/ContentPane",
    "dojox/mobile/parser",
    "dojox/mobile",
], function(Accordion, ContentPane) {
    // ...

    var p1 = new ContentPane({
        label: 'External Content1',
        iconPos1: '16,32,16,16',
        href: 'data/fragment1.html',
        selected: true
    });

    // ...
});

Upvotes: 1

jimSampica
jimSampica

Reputation: 12410

When you add content panes programmatically you can set selected:true which will initialize them opened

var pane = new ContentPane({
    label: "Added Content",
    selected:true,
    content: "My Content"
});
accordion.byId("testAccordion").addChild(pane2);

Note that this only works in the programmatic approach. Setting selected:true on data-dojo-props declaratively for multiple elements does not work (currently 1.10)

JSFiddle

Upvotes: 1

Related Questions