New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opera 9+

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!

Demo #1- One content always open, persistence of last expanded content enabled:

  • The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
  • Japan is a constitutional monarchy where the power of the Emperor is very limited.
  • Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
  • Agriculture has long been the most important sector of the Cambodian economy.
  • Langkawi is particularly known for its beaches which are among the best in Malaysia.

Expand 1 Panel | Expand 2nd Panel | Expand 3rd Panel | Expand 4th Panel | Expand 5th Panel

Demo #2- All contents initially collapsed, content contracts when mouse rolls out of accordion. Variable content widths:

  • This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
  • This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
  • This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
  • This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.


Directions: Developer's View

Step 1: Insert the following code in the HEAD section of your page

Select All

The code above references 2 external .js files and an image, which you need to download below (right click/ select "Save As"):

  1. haccordion.js (one variable near the top inside this file you should customize)
  2. haccordion.css

By default, upload these files to the same directory as where your webpage resides.

Step 2: Insert the below sample code into the BODY section of your page:

Select All

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:

haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false //collapse current expanded li when mouseout into general space?
})

 Here's a description of all of the available settings:

Option Description
accordionid: string

required

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.

If you want the accordion contents to each be of varying full width ("fullw") instead of a common width, see "Customizing the widths of the accordion contents" below.

selectedli: [int, bool] 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']

For more details, see "Defining your accordion's markup in an external file".

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:

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Spacing between each LI container*/
background: lightblue;
}

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:

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

<li style="border:10px solid blue">
<div class="hpanel" style="width:150px">
Accordion content 1 here
</div>
</li>

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

</ul>
</div>

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:

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

<li>
<div class="hpanel" style="width:150px">
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>

In the above case the first accordion content will have a full width of 150px when expanded, versus its peers that will have a full width as specified in "paneldimensions".

Read the supplementary pages below to learn about "Defining your accordion's markup in an external file" or "Expanding a content via an arbitrary link or URL parameter string".

Table Of Contents

This script consists of an index page plus two supplementary pages: