Horizontal Accordion script

Author:Dynamic Drive

Description: This script turns an ordinary UL
list into a horizontal accordion! Move your mouse over a LI to expand it side
ways while contracting its peers. The HTML markup of the Accordion (UL list) can
either be defined inline on the page, or inside an external file instead and
fetched via Ajax. Plus you can specify which LI should be expanded by default,
whether to persist the last expanded LI (within a browser session), and also,
expand a particular LI by passing in different parameters into the URL string.
All this makes for a versatile, smooth horizontal accordion!

It contains the HTML for a sample horizontal accordion.
That's it for installation!

Set up Information

Setting up this script on your site involves first defining the
HTML markup for a horizontal accordion on your page, which should consist of a
DIV with a UL list inside it. For example:

<div id="hc1" class="haccordion">
<ul>

<li>
<div class="hpanel">
Accordion content 1 here
</div>
</li>

<li>
<div class="hpanel">
Accordion content 2 here
</div>
</li>

<li>
<div class="hpanel">
Accordion content 3 here
</div>
</li>

</ul>
</div>

As you can see, you define each piece of accordion content
inside the DIV "hpanel". that's within each LI
element. The CSS classes in bold should not be changed. Notice the ID attribute
in red- this should be an arbitrary but unique value you give your horizontal
accordion so the script can identify it.

With your markup defined, you now need to initialize your
accordion, by calling haccordion.setup(settings) with the desired settings (some
of them required) in the HEAD section of your page:

The ID of the main DIV element that wraps
around the entire accordion (a UL list).

paneldimensions: {peekw:'px', fullw:'px',
h:'px'}

required

"peekw" sets the
common width of each
accordion content when it is contracted, "fullw" when it is
expanded, and "fullh" the height of each accordion
content. Value should be in explicit "px". Make sure the height is set
tall enough to accommodate the tallest item in your accordion contents.

Sets the accordion content (index) that
should be expanded by default when the page loads, plus whether to
enable persistence of the last expanded content (within a browser
session). The former should be an integer representing the index
position of the desired content relative to its peers, where 0=1st
content, 1=2nd etc. For example: selectedli: [0, true]

If
you want no accordion content to be expanded when the page loads, set
the first setting to -1 instead, such as: selectedli: [-1, true]

collapsecurrent: bool

Determines whether the currently expanded
accordion content should close when the mouse rolls out of it and into
general space. By default a content only closes when the mouse
moves over to another content, not white space.

When you set this
option to false, one content within your accordion will
always be open, while a value of false causes no content to
be open when the mouse rolls out of the accordion entirely.

speed: int

The speed of the reveal animation in terms of
milliseconds. The default setting is 200.

ajaxsource: {container:string, path:string}

This option when defined lets you put the
entire HTML markup of an accordion in an external file and have the
script add it to an empty DIV on the present page dynamically.
"container" should be set to the ID of an empty DIV on your page in
which to insert the accordion into, and "path" should be the path to the
external file on your server containing the accordion's markup. An
example: ajaxsource: [container: 'accordionarea', path:
'stuff/accordion.htm']

Styling your horizontal accordion

You can style your horizontal accordion either via global CSS,
by targeting the ID attribute of your accordion's main DIV, or inline CSS
inserted into the accordion's markup. The global CSS for the first demo above
looks like this:

Here I'm adding a 3px margin to each LI so there is
some gap between each accordion content. To style the actual content panel
itself, I style the "hpanel" inner DIV, such as add some padding
around the content and give it a background color.

You can also insert inline CSS directly into the HTML markup to
affect specific accordion contents only. Lets say you want the first accordion
content to have a thick border around it:

In general you should resort to one of the two methods above to style your
accordion, and avoid editing haccordion.css, as it
contains the basic CSS rules needed to create the look of a horizontal
accordion.

Customizing the widths of the accordion contents

The common width of your accordion contents is defined using the
"paneldimensions", setting in your initialization code, which
should suffice in a typical accordion set up. However, if you need specific
contents to be a different width from their peers, you can do that as well by
defining an explicit width inside the content's "hpanel" DIV tag.
For example: