Login Register

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
<!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 arrow
Navigate to previous titleLeft arrow
Navigate into pageTab
Navigate to next pageCtrl + page down, ctrl + tab (except IE7)
Navigate to previous pageCtrl + page up

are the keys platform-specific?

ctrl-tab, for example, goes to the next tabbed browser in FF/Mac. Also, Delete is like the browser back button. Ctrl-w doesn't seem to do anything, and I didn't think we could delete a title.

dijit.layout.AccordionPane support external links?

As AccordionContainer for example.
The attribute of 'href' can work well for text/html file on the server. But as I tested, the 'href' can not work for the external links, such as: www.google.com.

The dijit.layout.AccordionPane support external links?

External Links are Subject to Same-Domain Restriction

This is the same security restriction that governs XHR (since AccordionPane uses XHR). You can get around it by using a proxy script on your server.

Craig Riecke
criecke@dojotoolkit.org

Creating Programmatically

Hi,

I want to create the widget programatically using java script. I cant find any examples where this has been done.
Here is what I want to achieve:
Inside a SplitContainer, I want to have a ContentPane and an AccordionContainer.
Is this achieveable using Java Script?
Any code sample/link would help

Yep, It's Doable

Part 3 is the section to read, which tells you how to programmatically create widgets. But here is a sample (not tested):

var sc = dijit.byId("mySplitContainer");
var newCP = new dijit.layout.ContentPane({href: "someurl.html"}, sc.domNode);
var newAC = new dijit.layout.AccordionContainer({}, sc.domNode);
newCP.startup();
newAC.startup();

Thanks Criecke

Thanks Criecke

Also a point to note here, I dont think this is documented anywhere, the 'div' which we are using to create these containers have to be appended to the domNode before the layout widget is created else the containers wont show up in the UI

lazy load

hi,
in this example there one content pane that uses lazy load, it loads an external href. but as apposed to the tab container, in the accordion container the internal href page is loaded from server, before the tab is actually clicked and opened,
is there any way to get around it?
like for example detect on the click happen , and only then specify the href value for that pane?
thanks
uri

Lazy Load

The lazy load feature of the accordion pane doesn't appear to function as stated.  All content in my panes are loaded on page load even when not selected.  I was able to get around the problem like so:

Replace this:
<div dojoType="dijit.layout.AccordionPane" title="Some Title" href="${imageURL}"></div>

With this:
<div dojoType="dijit.layout.AccordionPane" title="Some Title" id="${category}">
   <script type="dojo/connect" event="onSelected" args="e">
      dijit.byId('${category}').setHref('${imageURL}');
   </script>
</div>

In the following code if

In the following code if style does not define the "height: 300px" the AccordianContainer can not expand at all. Does this mean that I will always have to define a height for the AccordianContainers. Should it not have a default height if the style does not define one.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Container Tests</title>
    <style type="text/css">
        @import "dojoroot/dijit/themes/tundra/tundra.css";
        @import "dojoroot/dojo/resources/dojo.css";
    </style>
    <script type="text/javascript" src="dojoroot/dojo/dojo.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="1000"
      style="margin-right: 30px; width: 400px; overflow: hidden">


      <div dojoType="dijit.layout.AccordionPane" selected="true" title="Pane 1">
        <p >Content 1</p >
      </div>

      <div dojoType="dijit.layout.AccordionPane" selected="false" title="Pane 2">
        <p >Content 2</p >
      </div>

      <div dojoType="dijit.layout.AccordionPane" selected="false" title="Pane 3">
        <p > Content 3</p >
      </div>

</div>
</body>

IE has height and float problems

I've used this setup:

<div id="content_div" style="position: relative; margin: 3em;">
   <div id="accordion_container_div" style="position: absolute; top: 1em; bottom: 0px; right: 0px; width: 10em;">
      <div  dojoType="dijit.layout.AccordionContainer"  style="position:absolute; top: 0px; bottom: 0px;">
         <div dojoType="dijit.layout.AccordionPane" title="Pane 1">
           <p >Content 1</p >
         </div>
         <div dojoType="dijit.layout.AccordionPane" title="Pane 2">
           <p >Content 2</p >
         </div>
         <div dojoType="dijit.layout.AccordionPane" title="Pane 3">
           Content 3
         </div>
      </div>
   </div>
</div>

This gives you good control over where you place your divs and seems to work ok with both IE7 and FF2. I previously used to set the accordion to "height: 100%" but this didn't work in IE7 (didn't expand at all).

I've also noticed that although you can have floating divs inside the AccordionPanes in FF2, it doesnt work in Internet Explorer (the divs float on top of everything and the scroll function becomes buggy). So don't do this:

<div dojoType="dijit.layout.AccordionPane">
  <div style="float: left;"> Content 1</div>
  <div style="float: left;"> Content 2</div>
  <div style="float: left;"> Content 3</div>
</div>

No AccordionPanes

With the above code if I use the arrow keys to navigate from pane to pane, sometimes I lose all panes when navigating forward from pane3 to pane1

only working with plain html?

hi,
first of all, thansk for this great piece of code.

I made it work :)
but unfortunatelly when I edit the tab1.html
and I put a "widget" it does not work :(

if I put youtube embeded videos works OK,
but with "script" widgets don't.

I'm trying to use a widget from widgetbox:
Widget

<script type="text/javascript" src="http://widgetserver.com/syndication/subscriber/InsertWidget.js?appId=94c88178-a959-42a5-85ea-29b248e1133b"></script>

Almost the same problem

Hello,

I think i have almost the same problem. Im trying to put some content including "script" inside a accordionPane. That works great a long as I'm not loading the content from a server with the href tag. Any solutions?

I have found out that it works in Firefox but not in IE.