Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
An enhanced version of Kevin P. Millers Accordion v2 for Prototype and Scriptaculous
branch: master

This branch is even with jedfoster:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
src
.gitignore
MIT-LICENSE
README.rdoc

README.rdoc

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

Something went wrong with that request. Please try again.