Dojo Accordian Pane in XPages

Create an Xpage and copy paste the following code into the source tab of the same. Preview the XPage and you will see toggling sections created using dojo as displayed in the following figure.

Associate the following styles with a page
        @import "../dijit/themes/tundra/tundra.css";
        @import "/resources/dojo.css"

Associate the following js library inclusion with the XPage
    <script type="text/javascript" src="dojo.xd.js" djConfig="parseOnLoad: true"></script>

Add the following script to the XPage
       dojo.require("dojo.parser");
       dojo.require("dijit.layout.AccordionContainer");

Step 4: Now add the following markup to the XPage
        <div dojoType="dijit.layout.AccordionContainer" duration="80"
                style="margin-right: 10px; width: 500px; height: 200px;">

        <div dojoType="dijit.layout.AccordionPane" selected="true" title="Benefits of Dojo">
                        <p >Benefits of Dojo: Associative arrays, Loosely typed variables,
Regular expressions, Objects and classes, Highly evolved date, math, and string libraries,
W3C DOM support in the Dojo.</p >
                </div>
      
                <div dojoType="dijit.layout.AccordionPane" title="Introduction to Dojo">
                     <p>This tips is light towards people with some JavaScript knowledge,
priestly used another JavaScript (Ajax) framework before, now have a real need to use some of
 the features found in dojo.</p>
                </div>
      
                <div dojoType="dijit.layout.AccordionPane" title="WebSite for Dojo Tutorial">
                   <p>If you want to learn dojo. Please go the following url and read the dojo
tutorials with running examples.
           URL: www.roseindia.net/dojo/</p>
                </div>
        </div>
   
Now preview the same and see how they work on the browser

Hope this helps :)