Accordion

Article Metadata

---

Article

Created: User:Kbwiki (06 Nov 2009)

Last edited: hamishwillee (30 Jul 2012)

Inheritance

Nokia.Accordion
    |- Nokia.Widget
        |- Nokia.Class (basic class)

1 - Description

An expandable/collapsible content pane. Applicable when content must be displayed within limited space. Labeled groups of information are displayed on the screen as a menu. The user can just hover over any option and this action may highlight it. When selecting the option, this option must “open up” to show what is inside. An expandable list component is used to compress several items within one item. This is largely used to compose menus with submenus.

2 - Visual Design

3 - Component Dependencies

3.1 CSS

<!-- Themeroller CSS -->
<link rel="stylesheet" href="themes/themeroller/<theme>/Themeroller.css" type="text/css" media="screen">
<!-- Specific Theme/Resolution CSS -->
<link rel="stylesheet" href="/themes/nokia/ext-theme/<theme>/<resolution>/custom.css" type="text/css" media="screen">

3.2 Javascript

<!-- jQuery file -->
<script src="/lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
<!-- Guarana file -->
<script src="/lib/Guarana.js" type="text/javascript" charset="utf-8"></script>

4 - Functional Specifications/Requirements

4.1 - Options

• element: 'selector'
  • jQuery selector or the DOM reference to become the container of the component.
• collapsible: boolean
  • Defines whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).
• multiple: boolean
  • Allow multiple sections openend (like a panel).
• closed: boolean
  • Render the component with all sections closed.
• header
  • Selector for the header element.
• Icons
  • Icons to use for headers. Icons may be specified for header and headerSelected, and we recommend using the icons native to the jQuery UI CSS Framework manipulated by the jQuery UI ThemeRoller.

4.2 - Events - Callbacks

• create: function()
  • Scope: [this.element]
• toggle: function(event, header, content)
  • Scope: [this.element]
• open: function(event, header, content)
  • Scope: [this.element]
• close: function(event, header, content)
  • Scope: [this.element]

4.3 - Methods

• toggle: function(index, event)
  • Closes all opened sections of the accordion
  • return void
• closeAll: function()
  • Closes all opened sections of the accordion
  • return [jQuery collection]
• getActiveContents: function()
  • Returns a jQuery collection of all opened/active accordion contents
  • return [jQuery collection]
• getActiveHeaders: function()
  • Returns a jQuery collection of all opened/active accordion headers
  • return [jQuery collection]

4.4 - Default options

• event: 'click'
• header: '> li > :first-child,> :not(li):even'
• icons: { header: "ui-icon-triangle-1-e", headerSelected: "ui-icon-triangle-1-s" }
• multiple: true
• collapsible: true
• closed: false

5 - Component Demo

5.1 HTML

<div id="accordion">
     <h3><a href="">Section 1</a></h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
          </p>
     </div>
     <h3><a href="">Section 2</a></h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
          </p>
     </div>
     <h3><a href="">Section 3</a></h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
          </p>
     </div>

</div>

5.2 Javascript

var accordion = new Nokia.Accordion({
     element: '#accordion',
     collapsible: true,
     multiple: false,
     closed: true,
     toggle: function(event, header, content) {
          //alert('Accordion: Toggle', event, header, content, this.element);
     },
     create: function() {
          //alert("Accordion: Start");
     },
     open: function(event, header, content) {
          //alert('Accordion: Open', event, header, content, this.element);
     },
     close: function(event, header, content) {
          //alert('Accordion: Close', event, header, content, this.element);
     }
});

6 - Nokia WRT Browser Compatibility

 

▴	S60 3.1	S60 3.2	S60 5.0
Accordion	YES	YES	YES