Horizontal Accordion script
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 380px. Note where the two inline CSS are added within the markup.
Step 1: Insert the following code in the HEAD section of your page
The code above references 2 external .js files and an image, which you need to download below (right click/ select "Save As"):
- haccordion.js (one variable near the top inside this file you should customize)
- 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:
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
(" |
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: |
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 |
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: