Merge pull request #1333 from SergioCrisostomo/pr1187

new option "keepOpen" to Fx.Accordion

Author: SergioCrisostomo

Docs/Fx/Fx.Accordion.md

@@ -42,6 +42,7 @@ Fx.Accordion Method: constructor
 * alwaysHide  - (*boolean*: defaults to false) If set to true, it will be possible to close all displayable elements. Otherwise, one will remain open at all time.
 * initialDisplayFx - (*boolean*; defaults to true) If set to false, the initial item displayed will not display with an effect but will just be shown immediately.
 * resetHeight - (*boolean*; defaults to true) If set to false, the height of an opened accordion section will be set to an absolute pixel size.
+* keepOpen - (*boolean*; defaults to false) If set to true, it will keep multiple elements open (no auto collapsing). To close a element you have to "click" the trigger again.
 
 ### Events
 

Source/Fx/Fx.Accordion.js

@@ -38,7 +38,8 @@ Fx.Accordion = new Class({
 		alwaysHide: false,
 		trigger: 'click',
 		initialDisplayFx: true,
-		resetHeight: true
+		resetHeight: true,
+		keepOpen: false
 	},
 
 	initialize: function(){
@@ -160,11 +161,13 @@ Fx.Accordion = new Class({
 		var obj = {},
 			elements = this.elements,
 			options = this.options,
-			effects = this.effects;
+			effects = this.effects,
+			keepOpen = options.keepOpen,
+			alwaysHide = options.alwaysHide;
 
 		if (useFx == null) useFx = true;
 		if (typeOf(index) == 'element') index = elements.indexOf(index);
-		if (index == this.current && !options.alwaysHide) return this;
+		if (index == this.current && !alwaysHide && !keepOpen) return this;
 
 		if (options.resetHeight){
 			var prev = elements[this.current];
@@ -173,24 +176,28 @@ Fx.Accordion = new Class({
 			}
 		}
 
-		if ((this.timer && options.link == 'chain') || (index === this.current && !options.alwaysHide)) return this;
+		if (this.timer && options.link == 'chain') return this;
 
 		if (this.current != null) this.previous = this.current;
 		this.current = index;
 		this.selfHidden = false;
 
 		elements.each(function(el, i){
 			obj[i] = {};
-			var hide;
-			if (i != index){
-				hide = true;
-			} else if (options.alwaysHide && ((el.offsetHeight > 0 && options.height) || el.offsetWidth > 0 && options.width)){
-				hide = true;
-				this.selfHidden = true;
+			var hide, isOpen;
+			if(!keepOpen || i == index){
+	            if (i == index) isOpen = (el.offsetHeight > 0 && options.height) || (el.offsetWidth > 0 && options.width);
+			
+				if (i != index){
+					hide = true;
+				} else if ((alwaysHide || keepOpen) && isOpen){
+					hide = true;
+					this.selfHidden = true;
+				}
+				this.fireEvent(hide ? 'background' : 'active', [this.togglers[i], el]);
+				for (var fx in effects) obj[i][fx] = hide ? 0 : el[effects[fx]];
+				if (!useFx && !hide && options.resetHeight) obj[i].height = 'auto';
 			}
-			this.fireEvent(hide ? 'background' : 'active', [this.togglers[i], el]);
-			for (var fx in effects) obj[i][fx] = hide ? 0 : el[effects[fx]];
-			if (!useFx && !hide && options.resetHeight) obj[i].height = 'auto';
 		}, this);
 
 		this.internalChain.clearChain();

Tests/Interactive/Fx/Fx.Accordion.html

@@ -150,3 +150,24 @@
 });
 </script>
 
+<hr/>
+
+<p>It should keep more than one section open at the time.</p>
+
+<dl id="acc7">
+  <dl>
+    <dt class="toggle"><b>first section</b></dt>
+    <dd class="stretcher">I'm the content for the first section.</dd>
+    <dt class="toggle"><b>second section</b></dt>
+    <dd class="stretcher">I'm the content for the second section.</dd>
+    <dt class="toggle"><b>third section</b></dt>
+    <dd class="stretcher">I'm the content for the third section.</dd>
+  </dl>
+</dl>
+
+<script>
+new Fx.Accordion($$('#acc7 dt'), $$('#acc7 dd'), {
+	keepOpen: true
+});
+</script>
+