Dojo Title Pane in XPages

Dojo sections are an awesome feature. I personally feel that these are good but takes its toll on the performance in the page load

Step 1: Include the following style imports by enclosing the same into a style tag on the XPage
        @import "../dijit/themes/soria/soria.css";
        @import "/resources/dojo.css"

Step 2: Include the dojo.xd.js file into the xpage with the following script tag
    <script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>

Step 3: Associate the following code to the XPage        
           dojo.require("dojo.parser");
           dojo.require("dijit.TitlePane");

Step 4: Add the following div tag to see how the section works on the XPage
         <div dojoType="dijit.TitlePane" title="Welcome to Roseindia
Dojo Tutorial">
          
      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. In this tips, learn about
the dojo and its directory structure. The purpose of this tips, for a new
user learn to dojo then you need to know about the what is dojo and its
directory structure.

        </div>