AccordionContainer

Like StackContainer and TabContainer, an AccordionContainer holds a set of panes whose titles are all visible, but only one pane's content is visible at a time. Clicking on a pane title slides the currently-displayed one away, similar to a garage door.

Examples

For this example, we'll show the lazy-loading feature of panes. Lazy loading defers the loading process until the pane is actually displayed. Since Dojo does this with XHR, you can only load panes that reside on the server from which the original content came. We'll use a test pane provided with Dijit. You can download this file from the nightly build at http://svn.dojotoolkit.org/dojo/dijit/trunk/tests/layout/tab1.html. For the example to work verbatim, just place it in the same directory as this file on your web server.

Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin ...

More content

  • One
  • Two
  • Three
/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.layout.AccordionContainer");
     </script>
</head>
<body class="tundra">
        <div dojoType="dijit.layout.AccordionContainer" duration="200"
                style="margin-right: 30px; width: 400px; height: 300px; overflow: hidden">
                <!-- content inline -->
                <div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1">
                        <p >Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin ...</p >
                </div>
       
                <!-- loading by indirect reference -->
                <div dojoType="dijit.layout.AccordionPane" title="Pane 2 (lazy load)"
                     href="/dojoroot/dijit/tests/layout/tab1.html" >
                </div>
       
                <div dojoType="dijit.layout.AccordionPane" title="Pane 3">
                    More content
                    <ul>
                        <li>One</li>
                        <li>Two</li>
                        <li>Three</li>
                    </ul>
                </div>
        </div>
</body>
</html>
dijit.layout.AccordionContainer
Holds a set of AccordionPane widgets and displays the title of every pane, but only one pane is visible at a time. Switching between panes is visualized by sliding the other panes up/down.
Attributes
duration Integer
250		 Amount of time (in ms) it takes for panes to slide
Methods
addChild(/*Widget*/ child, /*Integer?*/ insertIndex) Process the given child widget, inserting its dom node as a child of our dom node
back() New for 1.0Select previous page.
closeChild(/*Widget*/ page) Close the given widget, like clicking the X button
forward() New for 1.0Select next page.
Widget[] getChildren() returns array of children widgets
Widget getNextSibling() returns the widget "to the right"
Widget getParent() returns the parent widget of this widget, assuming the parent implements dijit._Container
Widget getPreviousSibling() returns the widget "to the left"
Boolean hasChildren() true if this widget has child widgets
removeChild(/*Widget*/ page) removes the passed widget instance from this widget but does not destroy it
resize(/* Object */ args) Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets). Args is of form {w: int, h: int, l: int, t: int}.
selectChild(/*Widget*/ page) Show the given widget (which must be one of my children)

dijit.layout.AccordionPane
AccordionPane is a ContentPane with a title. Indirect loading with the href property is supported. Nested Dijit layout widgets inside AccordionPane, such as SplitContainer, are not supported at this time.

Accessibility

Keyboard

ActionKey
Navigate to next titleRight or down arrow
Navigate to previous titleLeft or up arrow
Navigate into pageTab
Navigate to next pageCtrl + page down, ctrl + tab (except IE7)
Navigate to previous pageCtrl + page up