Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.


From Wiki
Jump to: navigation, search
Article Metadata
Created: User:Kbwiki (06 Nov 2009)
Last edited: hamishwillee (30 Jul 2012)



|- 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>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
     <h3><a href="">Section 2</a></h3>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.
     <h3><a href="">Section 3</a></h3>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget.


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 


This page was last modified on 30 July 2012, at 10:34.
32 page views in the last 30 days.