Click here to download.

This JavaScript accordion is only 1.5kb. If you have a small project that could use an accordion and don’t want to include an entire JavaScript framework to do the job then give this script a try.

You will need to call the following function in your body onload where the first parameter is the div id of the accordion parent and the second tells the script which section to expand onload.

slider.init('slider',1)

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the source code.

Updated 5/27/2008 – Slightly minified the code cutting off 1kb and added the script into a global namespace.
Updated 6/19/2008 – Shaved of a few bytes and added change the “c” variable to identify which section to be expanded onload.

#div {
margin-top: 20px;
margin-bottom: 10px;
margin-right: 5px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 15px;
border-width: 1px;
border-style: solid;
border-color: #666666;
font-family: Verdana, Helvetica, Arial;
font-size: 14px;
font-weight: bold;
}

The above code is littered with properties that could easily be combined for more legible code and decreased file size. Some properties might even be removed altogether since they default to the desired value. Below you will find before and after examples of some of the most useful CSS shorthand properties. As a general rule any browser later than IE5 should support all of these.

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
/* (auto, 0, px, pt, em or % ) */
}

#div {
margin:0 5px 10px 15px;
/* (top right bottom left) */
}

and

#div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}

#div {
margin:10px 20px 0;
/* (top right/left bottom) */
}

and

#div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#div {
margin:0 auto;
/* (top/bottom left/right) */
}

and

#div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}

#div {
margin:50px;
/* (top/right/bottom/left) */
}

Border

#div {
border-width: 5px;
/* (thin, thick, medium or set value) (default = medium) */
border-style: dotted;
/* (solid, dashed, dotted, double, etc) (default = none) */
border-color: blue;
/* (named, hex, rgb or 0-255) (default = value of elements/elements parent color property) */
}

#div {
border:5px dotted blue;
}

and

#div {
border-right-width: 2px;
border-right-style: solid;
border-right-color: #666666;
}

#div {
border-right:2px solid #666;
}

and

#div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}

#div {
border-width:3px 2px;
}

Background

#div {
background-color: #CCCCCC;
/* (named, hex, rgb or 0-255) (default = transparent) */
background-image: url(images/bg.gif);
/* (url or none) (default = none) */
background-repeat: no-repeat;
/* (repeat, repeat-x, repeat-y  or no-repeat) (default = repeat) */
background-attachment: scroll;
/* (fixed or scroll) (default = scroll) */
background-position: top left;
/* (top, right, left, bottom or center) (default = 0% 0%) */
}

#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}

Font

#div {
font-family: Verdana, Arial, Helvetica;
/* (Verdana, Arial, "Times New Roman", etc) (default = varies by browser) */
font-size: 12px;
/* (xx-small, medium, x-large, set value, etc) (default = medium) */
font-weight: bold;
/* (normal, bold, bolder, lighter, 100-900 or inherit) (default = normal) */
font-style: italic;
/* (normal, italic or oblique) (default = normal) */
font-variant: normal;
/* (normal or small-caps) (default = normal) */
line-height: 1.5;
/* (normal, px, pt, em, num or %) (default = normal) */
}

#div {
font:italic bold  12px/1.5 Verdana, Arial, Helvetica;
}

List

#div {
list-style-image: url(images/bullet.gif);
/* (url or none) (default = none) */
list-style-position: inside;
/* (inside or outside) (default = outside) */
list-style-type: square;
/* (circle, disc, square, etc) (default = disc) */
}

#div {
list-style:square inside url(images/bullet.gif);
}

Colors

Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Light Grey: #cccccc to #ccc
Orange: #ff6600 to #f60
White: #ffffff to #fff

Click here to download a PDF cheat sheet.