• Nested One

  Donec elementum lobortis lorem. Sed aliquet lacus vitae nibh. Sed ullamcorper pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Nested Two

  Vestibulum blandit mauris elementum mauris.

• Nested Three

  Morbi felis libero, porta non, sagittis ac, consectetur in, sem.

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit leigeber.com.

To initialize an accordion use the following code:

var accordion=new TINY.accordion.slider("accordion");
accordion.init("accordion","h3",false,0,"selected");

You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).

This script is provided as-is with no warranty or guarantee. It is available at no cost for any project, non-commercial or commercial. Paid support is available by clicking here

<style type="text/css">
/*<![CDATA[*/
/**
 * @version             1.3
 * @package             SimpleTabs
 * @author    Fotis Evangelou - http://nuevvo.com/labs/simpletabs
 * @copyright   Copyright (c) 2009-2011 Fotis Evangelou / Nuevvo Webware Ltd. All rights reserved.
 * @license             GNU/GPL license: http://www.gnu.org/copyleft/gpl.html
 */
 
div.simpleTabs { padding:10px; }
ul.simpleTabsNavigation { margin:0 10px; padding:0; text-align:left; }
ul.simpleTabsNavigation li { list-style:none; display:inline; margin:0; padding:0; }
ul.simpleTabsNavigation li a { border:1px solid #E0E0E0; padding:3px 6px; background:#F0F0F0; font-size:14px; text-decoration:none; font-family:Georgia, "Times New Roman", Times, serif; }
ul.simpleTabsNavigation li a:hover { background-color:#F6F6F6; }
ul.simpleTabsNavigation li a.current { background:#fff; color:#222; border-bottom:1px solid #fff; }
div.simpleTabsContent { border:1px solid #E0E0E0; padding:5px 15px 15px; margin-top:3px; display:none; }
div.simpleTabsContent.currentTab { display:block; }
/*]]>*/
</style>