Accordion for script.aculo.us

Everybody knows the Accordion effect from mootools. In the past I used script.aculo.us pretty much, and I couldn't find a good accordion effect, which worked the same like the mootools version. So I decided the create one, and this is the result.

How to Use
You'll need script.aculo.us, which you can download here.

Put the following in your <head> tag:
Toggle highlightingCode
  1.  
  2. <script type="text/javascript" src="js/prototype.js"></script>
  3. <script type="text/javascript" src="js/scriptaculous.js"></script>
  4. <script type="text/javascript" src="js/accordion.js"></script>
  5.  


Create the html for the accordion:
Toggle highlightingCode
  1.  
  2. <div id="accordion">
  3.     <h3>Title 1</h3>
  4.     <p>Text 1</p>
  5.    
  6.     <h3>Title 2</h3>
  7.     <p>Text 2</p>
  8.    
  9.     <h3>Title 3</h3>
  10.     <p>Text 3</p>    
  11. </div>
  12.  


And add before the </body> tag this code:
Toggle highlightingCode
  1.  
  2. <script type="text/javascript">
  3. new Accordion("div#accordion h3", "div#accordion p");
  4. </script>
  5.  


Constructor Arguments

The first parameter is a CSS selector, which selects all headings, for the accordion.

The second parameter is a CSS selector which selects all content elements, used by the accordion.

The third parameter is a list of options, see below.

Options

duration
The duration of the slide and fade effect.
Toggle highlightingCode
  1.  
  2. new Accordion('div#accordion h3', 'div#accordion p', {duration: 0.5});
  3.  


default_open
The index of the body which is open by default.

OnStart
An event which will be called before opening a new content element.

OnFinish
An event which will be called after the open effect.

Download Download script as zip

Tag Tags: Javascript Scriptaculous

Source

  • Accordion.js
  1. /**
  2.  * Accordion Effect for Script.aculo.us
  3.  * Created by Lucas van Dijk
  4.  * http://www.return1.net
  5.  *
  6.  * Copyright 2007 by Lucas van Dijk
  7.  *
  8.  * Permission is hereby granted, free of charge, to any person obtaining
  9.  * a copy of this software and associated documentation files (the
  10.  * "Software"), to deal in the Software without restriction, including
  11.  * without limitation the rights to use, copy, modify, merge, publish,
  12.  * distribute, sublicense, and/or sell copies of the Software, and to
  13.  * permit persons to whom the Software is furnished to do so, subject to
  14.  * the following conditions:
  15.  *
  16.  * The above copyright notice and this permission notice shall be
  17.  * included in all copies or substantial portions of the Software.
  18.  */
  19.  
  20. var Accordion = Class.create();
  21.  
  22. Accordion.prototype =
  23. {
  24.     initialize: function(handles, bodys, options)
  25.     {
  26.         this.options = this._set_options(options);     
  27.         this.headers = $$(handles);
  28.         this.bodys = $$(bodys);
  29.        
  30.         if(this.bodys.length != this.headers.length)
  31.         {
  32.             throw Error('Number of headers/bodys does not match!');
  33.         }
  34.        
  35.         for(var i = 0; i < this.headers.length; i++)
  36.         {      
  37.             Event.observe(this.headers[i], this.options.event_trigger, this.show.bind(this, i));           
  38.             this.headers[i].style.cursor = "pointer";
  39.            
  40.             this.bodys[i].style.display = "none";
  41.         }
  42.        
  43.         this.bodys[this.options.default_open].id = "visible";
  44.        
  45.         this.show(this.options.default_open, true);
  46.     },
  47.  
  48.     show: function(index, force)
  49.     {      
  50.         if ((index >= this.length) || (index < 0))
  51.         {
  52.             throw Error('Index out of range');
  53.         }
  54.        
  55.         if (this.bodys[index].id == 'visible')
  56.         {                              
  57.             if (typeof force == "boolean")
  58.             {                      
  59.                 this.options.OnStart(index, this.bodys[index]);
  60.                                
  61.                 // Force display the visible object            
  62.                 for(var i = 0; i < this.bodys.length; i++)
  63.                 {
  64.                     if(this.bodys[i].style.display != 'none' && i != index)
  65.                     {
  66.                         new Effect.BlindUp(this.bodys[i]);
  67.                     }
  68.                 }
  69.                
  70.                 new Effect.BlindDown(this.bodys[index]);
  71.             }
  72.         }
  73.         else
  74.         {      
  75.             this.options.OnStart(index, this.bodys[index]);
  76.                        
  77.             // Normal change
  78.             new Effect.Parallel(
  79.                 [
  80.                     new Effect.Fade($('visible')),             
  81.                     new Effect.BlindUp($('visible')),
  82.                     new Effect.BlindDown(this.bodys[index]),
  83.                     new Effect.Appear(this.bodys[index])
  84.                 ], {
  85.                     duration: this.options.duration
  86.                 }
  87.             );
  88.    
  89.             $('visible').id = "";
  90.             this.bodys[index].id = "visible";
  91.         }
  92.        
  93.         this.options.OnFinish(index, this.bodys[index]);
  94.     },
  95.    
  96.     _default_options:
  97.     {
  98.         duration: 0.3,
  99.         event_trigger: 'click',
  100.         OnStart: function() { },
  101.         OnFinish: function() { },
  102.         default_open: 0
  103.     },
  104.    
  105.     _set_options: function(options)
  106.     {
  107.         if(typeof options != "undefined")
  108.         {      
  109.             var result = [];
  110.             for(option in this._default_options)
  111.             {
  112.                 if(typeof options[option] == "undefined")
  113.                 {
  114.                     result[option] = this._default_options[option];
  115.                 }
  116.                 else
  117.                 {
  118.                     result[option] = options[option];
  119.                 }
  120.             }
  121.        
  122.             return result;
  123.         }
  124.         else
  125.         {
  126.             return this._default_options;
  127.         }
  128.     }      
  129. };
  130.  
  131. Effect.Accordion = Accordion;