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 ...