Dojo: The Definitive Guide

AccordionContainer

Like a TabContainer, AccordionContainer inherits from StackContainer and is a means of displaying one child at a time from a collection of widgets. The visual difference is that the container looks like a vertical accordion, and animates when each child is selected.

One important difference in how you use AccordionContainer, however, is that you must use a special child container called AccordionPane that provides an explicit wrapper for its child widgets. The actual reasoning for why this is the case is not very interesting and has to do with how the underlying implementation for AccordionContainer. In general, just treat an AccordionPane like a ContentPane and be on your merry way.

Warning

As of version 1.1, AccordionPane does not support nested layout widgets such as SplitContainer; virtually all other types of content, however, should work just fine.

Example 14-8 shows a simple AccordionContainer in action.

Example 14-8. Creating an AccordionContainer in markup

<div id="foo" dojoType="dijit.layout.AccordionContainer"
  style="width:150px; height:150px; margin:5px">
    <div dojoType="dijit.layout.AccordionPane" title="one">
            <p>One fish...</p>
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="two">
            <p>Two fish...</p>
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="red">
            <p>Red fish...</p>
    </div>
    <div id="blue" dojoType="dijit.layout.AccordionPane" title="blue">
        <div dojoType="dijit.layout.ContentPane" href="blueFish"></div>
    </div>
</div>

With respect to API, AccordionContainer itself provides only one additional attribute beyond what StackContainer offers, shown in Table 14-8.

Table 14-8. AccordionContainer API

Name (default)	Type	Comment
duration (250)	Integer	An attribute of AccordionPane that provides the duration in milliseconds that it should take to slide the pane to select another one.

Although we could leave programmatic creation as an exercise for the interested reader, there is a slight difference to the creation pattern because AccordionPane is a dijit on its own, as shown in Example 14-9.

Example 14-9. Programmatically creating an AccordionContainer

var container = new dijit.layout.AccordionContainer({}, "foo");

var content1 = dojo.doc.createElement("p");
content1.innerHTML = "content 1";

var ap1 = new dijit.layout.AccordionPane({title: "pane1", selected : true}, content1);
container.addChild(ap1);

var content2 = dojo.doc.createElement("p");
content2.innerHTML = "content 2";

var ap2 = new dijit.layout.AccordionPane({title: "pane2"}, content2);
container.addChild(ap2);

container.startup(  );