Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Using AccordionContainer

The accordion container is very popular in Dojo. It presents users with an accordion-like control that lets them expand pages to see a page's content.

Although you can use content panes in an accordion container, the example here, accordioncontainer.html, uses the more common AccordionPane pages.

To add accordion containers:

  1. Open your Web page in a text editor.
  2. Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.AccordionContainer"); statements to your code.
  3. Create a new <div> element with the dojoType dijit.layout.AccordionContainer. In this element, include four <div> elements, each with the dojoType dijit.layout.AccordionPane.

    Script 4.9 shows what your page should look like after you make the additions.

    Script 4.9. Adding accordion containers.

    1   <html>
    2     <head>
    3       <title>Using
    4         AccordionContainer</title>
    5
    6       <link rel="stylesheet"
    7         type="text/css"
    8         href="http://o.aolcdn.com/
    9         dojo/1.1/dojo/
    10        resources/dojo.css" />
    11
    12      <link rel="stylesheet"
    13        type="text/css"
    14        href="http://o.aolcdn.com/dojo/
    15        1.1/dijit/
    16        themes/tundra/tundra.css" />
    17
    18      <script
    19        djConfig="parseOnLoad:true"
    20        type="text/javascript"
    21        src="https://o.aolcdn.com/dojo/1.1/
    22          dojo/dojo.xd.js">
    23      </script>
    24
    25      <script type="text/javascript">
    26        dojo.require("dojo.parser");
    27        dojo.require(
    28          "dijit.layout.ContentPane");
    29        dojo.require(
    30        "dijit.layout.AccordionContainer");
    31      </script>
    32    </head>
    33
    34    <body class="tundra">
    35      <h1>Using Accordion Containers</h1>
    36      <br>
    37
    38      <div dojoType=
    39        "dijit.layout.AccordionContainer"
    40        style="width:150px; height:180px;
    41        margin:5px">
    42        <div dojoType=
    43          "dijit.layout.AccordionPane"
    44          title="CEO">
    45          Ralph Kramden
    46        </div>
    47
    48        <div dojoType=
    49          "dijit.layout.AccordionPane"
    50          title="VP Operations">
    51          Ed Norton
    52        </div>
    53
    54        <div dojoType=
    55          "dijit.layout.AccordionPane"
    56          title="VP Marketing">
    57          Alice Kramden
    58        </div>
    59
    60        <div id="blue" dojoType=
    61          "dijit.layout.AccordionPane"
    62          title="Treasurer">
    63          Trixie Norton
    64        </div>
    65      </div>
    66    </body>
    67  </html>
    
  4. Save your file.
  5. Navigate to your file in a browser. You should see a new accordion container (Figure 4.11).
    Figure 4.11

    Figure 4.11 An accordion container.

  6. Click a new section in the container to open the corresponding new accordion pane (Figure 4.12).
    Figure 4.12

    Figure 4.12 A new accordion pane.

  • + Share This
  • 🔖 Save To Your Account