Skip to content

An enhanced version of Kevin P. Millers Accordion v2 for Prototype and Scriptaculous

Notifications You must be signed in to change notification settings

tvdeyen/accordion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Copyright © 2007 stickmanlabs Additions © 2009 Thomas von Deyen | thinkworkdone

Author: Kevin P Miller | www.stickmanlabs.com Additional Author: Thomas von Deyen | www.thinkworkdone.com

Prototype 1.6 fixes by the_coder via snipplr.com/view/5502/stickman-labs-accordion-updated-for-prototypejs-16-/

Accordion v2.1

This is the Prototype 1.6 compatible Version of Stickmanlabs Accordion V2.0 with additional afterComplete option.

You’ll need Prototype 1.6 and Scriptaculous 1.8.2 too to make this work.

Usage

Include Prototype, Scriptaculous and Accordion in the head section of your HTML file like:

<script src="js/prototype.js" lang="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" lang="text/javascript"></script>
<script src="js/accordion.js" lang="text/javascript"></script>

Put prototype.js, scriptaculous.js, effects.js and accordion.js in a folder named js inside the rootpath of your website.

Make an accordion with following layout:

<div id="accordion">
  <h2 class="accordion_toggle">Category A</h2>
  <div class="accordion_content">
    <p>Content of your Accordion can be everything like:</p>
    <ul>
      <li>Listitems</li>
      <li>divs</li>
      <li>ps</li>
      <li>spans</li>
      <li>tables</li>
      <li>etc...</li>
    </ul>
    <p>Just place it inside the div with the classname passed to the accordion.js options.</p>
  </div>
  <h2 class="accordion_toggle">Category B</h2>
  <div class="accordion_content">
    <p>More content....</p>
  </div>
  <h2 class="accordion_toggle">Category C</h2>
  <div class="accordion_content">
    <p>More content....</p>
  </div>
  etc...
</div>

At the very bottom of you page, right before the closing </body> tag place this javascript source

<script type="text/javascript" charset="utf-8">
// <![CDATA[
  var my_accordion = new Accordion('accordion');
// ]]>
</script>

You can style the accordion as you like. But assure to hide overflowing accordion_content like:

.accordion_content {overflow: hidden;}

That’s it! If you want more control of you accordion pass some of these options:

resizeSpeed: Everything below 8 (the default) is fast.
classNames: {
  toggle       : 'some_classname',
  toggleActive : 'some_classname',
  content      : 'some_classname'
}
direction: If you want to make an horizontal accordion then pass 'horizontal'. Default is 'vertical'.
onEvent: A eventname without the 'on'. I.e. 'mouseover', 'mousedown', or 'click' (the default).
afterComplete: A function called after animating the accordions open/close action.

The afterComplete option is very interesting for nested links, i.e. in navigations. So you can wait the effect to finish before redirecting to another page.

Navigation Accordion Example

This is a more complex example that shows the usage of the afterComplete option.

<style type="text/css">
  .navi_sub_items{overflow: hidden;}
</style>
<div id="navigation">
  <div class="navi_item">
    <a href="/pets">Pets</a>
  </div>
  <div class="navi_sub_items">
    <ul>
      <li>Kittens</li>
      <li>Puppies</li>
      <li>Mice</li>
    </ul>
  </div>
  <div class="navi_item">
    <a href="/services">Services</a>
  </div>
  <div class="navi_sub_items">
    <ul>
      <li>Dog Hairdressing</li>
      <li>Cat Massage</li>
      <li>Mice milking</li>
    </ul>
  </div>
  <div class="navi_item">
    <a href="/info">Info</a>
  </div>
  <div class="navi_sub_items">
    <ul>
      <li>Contact</li>
      <li>About</li>
      <li>Legal</li>
    </ul>
  </div>
</div>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
  var navigation = new Accordion('navigation', {
    classNames: {
      toggle: 'navi_item',
      toggleActive: 'navi_active',
      content: 'navi_sub_items'
    },
    afterComplete: function(){
      toggle = $$('#navigation .navi_active')[0];
      url = toggle.down('a').readAttribute('href');
      window.location = url;
    }
  });
// ]]>
</script>

Activate-accordion-content-on-page-load Example

You want to open one or more accordion content divs on page load? Then add accordion_toggle_active to the toggle you want to be opened and take this script.

<script type="text/javascript" charset="utf-8">
// <![CDATA[
  var my_accordion = new Accordion('accordion');
// ]]>
</script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
  var active_accordions = $$('#accordion .accordion_toggle_active');
  active_accordions.each(function(toggle) {
    var content = toggle.next(0);
    content.setStyle({
      height: 'auto',
      display: 'block'
    });
    my_accordion.showAccordion = content;
  });
// ]]>
</script>

More examples on www.stickmanlabs.com/accordion/

License

Accordion is freely distributable under the terms of an MIT-style license. See included MIT-LICENSE file

About

An enhanced version of Kevin P. Millers Accordion v2 for Prototype and Scriptaculous

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published