accordion


a awesome accordion menu link very simply and easy to use

http://www.stickmanlabs.com/accordion/

Implementations

  1. Include the files

You need to include accordion.js but it requires prototype.js and effects.js (like I said this is for scriptaculous!). As long as you are using at least the latest stable builds you are fine.

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>

2.)The Markup

Pretty much anything will work, so its really up to you. The presentation is up to you (see the source of this page for some examples). Ideally you should probably use header tags with div’s containing the content as this would be best symantically speaking and for seo. Below is a basic example.

<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
...
...
...
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>



  Normal
  0

  false
  false
  false

  EN-US
  X-NONE
  X-NONE

  MicrosoftInternetExplorer4





<!--[endif]-->

For nested accordion

<div id =” vertical_nested_container”>

<h2 class="accordion_toggle">Title Bar</h2>

<div class="accordion_content">...</div>

...

...

<div class=” accordion_content”>

<div id=” vertical_nested_container”>

<h2 class="vertical_accordion_toggle">Title Bar</h2>

<div class="vertical_accordion_content">...</div>

...

...

</div>

</div>

...

<h2 class="accordion_toggle">Title Bar</h2>

<div class="accordion_content">...</div>

4. Vertical and horizontal accorion
// General Syntax
new accordion('container-selector', options);

// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
    classNames : {
        toggle : 'horizontal_accordion_toggle',
        toggleActive : 'horizontal_accordion_toggle_active',
        content : 'horizontal_accordion_content'
    },
    defaultSize : {
        width : 525
    },
    direction : 'horizontal'
});
 to open the menu default
// Let's create it
var verticalAccordion = new accordion('#bottom_container');

// Now lets open the first slide
verticalAccordion.activate($$('#bottom_container .accordion_toggle')[0]);


// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');

to open the sub menu default

'...........

<!–[if gte mso 9]> Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4 <![endif]–><!–[if gte mso 9]> <![endif]–> <!–[endif]–>

For nested accordion

<h2 class=“accordion_toggle”>Title Bar</h2>

<div class=“accordion_content”>…</div>

<h2 class=“accordion_toggle”>Title Bar</h2>

<div class=“accordion_content”>…</div>

 

 

 

 

 

<h2 class=“accordion_toggle”>Title Bar</h2>

<div class=“accordion_content”>…</div>

3.Vertical, one horizontal

Below is how I created the two accordions you see on this page, one vertical, one horizontal with a specified width.

// General Syntax
new accordion('container-selector', options);
 
// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
    classNames : {
        toggle : 'horizontal_accordion_toggle',
        toggleActive : 'horizontal_accordion_toggle_active',
        content : 'horizontal_accordion_content'
    },
    defaultSize : {
        width : 525
    },
    direction : 'horizontal'
});
 
// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: