Posts Tagged ‘Java scrpit’

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');