G39 Accordion Widget

Include:

Definition

A fixed-height box with multiple expanding/collapsing sections, only one of which can be viewed at a time.

Usage

Content shouldn't overflow the fixed-height

Because this component has a fixed-height design, publishers/implementers should make sure content doesn't exceed the height of the box, or the widget will "jump" during the expand/collapse animation. It's better to have whitespace at the bottom of the content panels than to overflow the height. Options are provided below to accomodate different content heights.

For use in a fixed-width environment

Also, because of the fixed-height concern mentioned above, this component is best used in a fixed-width environment, since in a variable-width environment content will wrap to an unpredictable height.

For use with pc08 Generic Html Elements

Generally, any pc08 variation is allowed in the content area of this component. However it's advisable spot check each implementation for compatibility.

Section headings shouldn't wrap

Publishers/implementers should try to keep headings limited to one line of text, otherwise it disrupts the layout of the widget. If necessary, use ellipses (...) to truncate a heading and provide more detail in the content section.

v0 Accordion Widget, Default Height

This is shown on a grey background to indicate its use on a component with a grey background such as the pc01 Title & Container or the d07 Tabbed Content.

Section Heading 1

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus. more

Section Heading 2

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

Section Heading 3

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

Section Heading 4

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille.

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit.


Copy the code below and paste into your text editor.

No Templates Reference this

v0 x1 Accordion Widget, Short Example

This is shown on a grey background to indicate its use on a component with a grey background such as the pc01 Title & Container or the d07 Tabbed Content.

Section Heading 1

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater.

Section Heading 2

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater.

Section Heading 3

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater.

Section Heading 4

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater.


Copy the code below and paste into your text editor.

No Templates Reference this

v0 x2 Accordion Widget, Tall Example

This is shown on a grey background to indicate its use on a component with a grey background such as the pc01 Title & Container or the d07 Tabbed Content.

Section Heading 1

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit.

Section Heading 2

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille.

Section Heading 3

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille.

Section Heading 4

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit Acestes, horridus in iaculis et pelle Libystidis ursae, Troia Criniso conceptum flumine mater quem genuit. ueterum non immemor ille parentum gratatur reduces et gaza laetus.

At procul ex celso miratus uertice montis aduentum sociasque rates occurrit.


Copy the code below and paste into your text editor.

No Templates Reference this

Contact About Sun News & Events Employment Site Map Privacy Terms of Use Trademarks Copyright 1994-2006 Sun Microsystems, Inc.