TitlePane

A TitlePane is a pane with a title on top that can be opened or collapsed. The visibility of the container is toggled by activating an arrow "button" on the title bar via the mouse or keyboard.

Examples

The rain in Spain falls mainly on the New York Stock Exchange.

/* 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>TitlePane Demo</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

        <script type="text/javascript">

           dojo.require("dojo.parser");

           dojo.require("dijit.TitlePane");

     </script>

</head>

<body class="tundra">

        <div dojoType="dijit.TitlePane" title="A Message from Thurston Howell III">

           The rain in Spain falls mainly on the New York Stock Exchange.  

        </div>

</body></html>

dijit.TitlePane A pane with a title on top, that can be opened or collapsed.
Attributes
duration	Integer 250	milliseconds to fade in/fade out
open	Boolean true	Whether pane is opened or closed.
title	String	Title of the pane. Use setTitle() to change after creation time.
Methods
setContent(/* String */content)	Typically called when an href is loaded. Our job is to make the animation smooth
setTitle(/* String */title)	sets the text of the title
toggle()	switches between opened and closed state

Accessibility (updated for 1.0)

Keyboard

Each title pane title is included in the tab order of the document.

Action	Key
toggle open/close of the title pane	enter or space key with focus on the title pane title
Navigate into an opened title pane	tab

Screen Reader Information

The title pane container will have an ARIA labelledby property which points to the id of the title pane title. The title pane title has the ARIA role of button and property of haspopup=true to indicate that it controls the display of the pane. The role of button is used to indicate to the user that an action will occur when the button is activated. The tilte pane container will have an ARIA role of region which will be supported in Firefox 3 and identified by future versions of the screen readers.