Animated Collapsible DIV - keep one div shown at all times

[phearfactor]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem: I am using the grouped examples 4,5,6 and it works great. But I am wonder if there is anyway when using the toggle method to always keep one of the DIV's shown?

Example of what I want:
If I close a div that is open, it automatically opens the other div that is closed in a group of two different div's.

Currently if I click a closed div it opens and automatically closes the other div that is open in the group. (Just like examples 4-6 on the link above but with 2 div's) BUT if you click the open DIV it just closes it and you end up with 2 closed divs.

Objective would to always have one of the div's being shown.

Thanks for any help!

Douglas

[jscheuer1]

Taking that same example, the pets group - Give each one a class of pets (from Step 2 on the demo page, showing only the markup for the group 'pets'):

<p><b>Example 4 (part of group "pets"):</b></p>

<a href="#" rel="toggle[cat]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('cat')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('cat')">Slide Up</a>

<div class="pets" id="cat" style="width: 400px; background: #BDF381;">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>

<p><b>Example 5 (part of group "pets"):</b></p>

<a href="#" rel="toggle[dog]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('dog')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('dog')">Slide Up</a>

<div class="pets" id="dog" style="width: 400px; background: #BDF381;">
The dog (Canis lupus familiaris) is a domesticated subspecies of the wolf, a mammal of the Canidae family of the order Carnivora. The term encompasses both feral and pet varieties and is also sometimes used to describe wild canids of other subspecies or species. The domestic dog has been one of the most widely kept working and companion animals in human history, as well as being a food source in some cultures.
</div>

<p><b>Example 6 (part of group "pets"):</b></p>

<a href="#" rel="toggle[rabbit]" data-openimage="collapse.jpg" data-closedimage="expand.jpg"><img src="collapse.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('rabbit')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('rabbit')">Slide Up</a>

<div class="pets" id="rabbit" style="width: 400px; background: #BDF381">
Rabbits are ground dwellers that live in environments ranging from desert to tropical forest and wetland. Their natural geographic range encompasses the middle latitudes of the Western Hemisphere. In the Eastern Hemisphere rabbits are found in Europe, portions of Central and Southern Africa, the Indian subcontinent, Sumatra, and Japan.
</div>

Then in your init code, add the highlighted as shown (from Step1 on the Demo page, addDiv directives for the other examples removed):

<script type="text/javascript">

animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if($(divobj).hasClass('pets')){
		if(!$('.pets:visible').size()){
			var divs = $('.pets').not(divobj), idx = divs.size();
			animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
		}
	}
}

animatedcollapse.init()

</script>

[phearfactor]

Thanks alot! This is what I was looking for.

Is there anyway to make them close/open at the same time? If not that is fine. It is good enough for me.

[jscheuer1]

My gut tells me this is less reliable, but it appears to work fine in limited testing.

Keep the added class attributes that we used before, and get rid of the added script code. Put this new code following the:

animatedcollapse.init()

directive. New code:

jQuery(function($){
	var classNames = ['pets'];
	$.each(classNames, function(){
		var className = this;
		$('a').bind('click', function(){
			var el, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
			/javascript:animatedcollapse\.(toggle|hide)/.test(this.href) &&
			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
				var divs = $('.' + className).not(el), idx = divs.size();
				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
			}
		});
	});
});

For just the pets example, that's it. If you use a different class, change it in the array (highlighted in the above).

If you have more than one group, expand the array (highlighted in the above), ex:

	var classNames = ['pets', 'otheranimals', 'people'];

Just make sure you've configured those groups properly with addDiv and given each content div in them the appropriate class attribute.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[phearfactor]

hmmm, doesn't seem to work right anymore. This was suppose to just collapse one and expand the other at the same time. Right? I am getting the same effect as before but now sometimes both items are expanded at the same time.


I use "boxes" as my class but maybe I am adding the code to the wrong area. This is what I have for the whole script.

<script type="text/javascript">

animatedcollapse.addDiv('rightBoxTop', 'fade=0,speed=400,group=boxes,persist=1,hide=0')
animatedcollapse.addDiv('rightBoxBottom', 'fade=0,speed=400,group=boxes,persist=1,hide=0')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
	if($(divobj).hasClass('boxes')){
		if(!$('.boxes:visible').size()){
			var divs = $('.boxes').not(divobj), idx = divs.size();
			animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
		}
	}
}

animatedcollapse.init()
jQuery(function($){
	var classNames = ['boxes'];
	$.each(classNames, function(){
		var className = this;
		$('a').bind('click', function(){
			var el, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
			/javascript:animatedcollapse\.(toggle|hide)/.test(this.href) &&
			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
				var divs = $('.' + className).not(el), idx = divs.size();
				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
			}
		});
	});
});
</script>

If its just not possible that is ok. I will just go back the previous code you gave me that worked great.

Thanks for the help!
Douglas

[phearfactor]

I also tried the code like this with the same result.

<script type="text/javascript">

animatedcollapse.addDiv('rightBoxTop', 'fade=0,speed=400,group=boxes,persist=1,hide=0')
animatedcollapse.addDiv('rightBoxBottom', 'fade=0,speed=400,group=boxes,persist=1,hide=0')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state

}

animatedcollapse.init()
jQuery(function($){
	var classNames = ['pets'];
	$.each(classNames, function(){
		var className = this;
		$('a').bind('click', function(){
			var el, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
			/javascript:animatedcollapse\.(toggle|hide)/.test(this.href) &&
			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
				var divs = $('.' + className).not(el), idx = divs.size();
				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
			}
		});
	});
});
</script>

[jscheuer1]

Seems to work fine here (use your browser's 'view source' to see the code):

http://home.comcast.net/~jscheuer1/s...lapse/demo.htm

Notes: Even though the other demo collapsible divs are shown, only the pets are set up as a group with this added code.
I am using a more recent version of jQuery, that might be it, or not . . .

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[phearfactor]

Thanks again. It is working now. Comparing my source code to yours the only thing different was I was using the whole javascript line in html:

 <div id="container">   <div id="rightBoxContainer">
<a href="javascript:animatedcollapse.toggle('rightBoxTop')"  data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"> <img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" /> What's New!</a> 
<div class="clear_floats" ></div>
<div id="rightBoxTop" class="boxes">Content for  id "right_container" Goes Here</div>
      
<a href="javascript:animatedcollapse.toggle('rightBoxBottom')" data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"><img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" />Our Green Commitment</a> 
<div id="rightBoxBottom" class="boxes" >Content for  id "right_container_bottom" Goes Here</div></div>

So I changed it to match yours like so:

 <div id="container"><div id="rightBoxContainer">
      
<a href="#" rel="toggle[rightBoxTop]" data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"><img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" /> What's New!</a> 
      <div class="clear_floats" ></div>
<div id="rightBoxTop" class="boxes">Content for  id "right_container" Goes Here</div>
      
<a href="#" rel="toggle[rightBoxBottom]" data-openimage="img/down_arrow_indexPG.jpg" data-closedimage="img/right_arrow_indexPG.jpg"><img src="img/down_arrow_indexPG.jpg" width="20" height="20" border="0" />Our Green Commitment</a> 
      <div id="rightBoxBottom" class="boxes" >Content for  id "right_container_bottom" Goes Here</div></div>

I thought the rel=toggle thing was short hand according to the script description but I guess it has to be written that way or my javascript line was wrong. Either way it works just the way I was hoping for now.

Thanks! I really appreciate the assistance.

[jscheuer1]

They should be equivalent, however I found I had to treat the rel= activations differently than the href="javascript: ones. I had tested all of both types except href="javascript:animatedcollapse.toggle, assuming it would be like the others of its type, but it's not.

If you want to be able to use it with this setup, use this function in place of the one we've currently been using:

jQuery(function($){
	var classNames = ['pets'];
	$.each(classNames, function(){
		var className = this;
		$('a').bind('click', function(e){
			var el, tog, ex, rel = this.rel && (ex = /(toggle|collapse)\[([^\]]+)\]/.exec(this.rel))? ex : '';
			if(rel && (el = $('#' + rel[2])).hasClass(className) && el.css('height') !== '1px' ||
			(tog = /javascript:animatedcollapse\.(toggle|hide)/.exec(this.href)) &&
			(el = $('#' + /\('([^']+)'\)/.exec(this.href)[1])).css('display') === 'block' && el.hasClass(className)){
				if(tog && tog[1] === 'toggle'){
					e.preventDefault();
					animatedcollapse.hide(el.get(0).id);
				}
				var divs = $('.' + className).not(el), idx = divs.size();
				animatedcollapse.show(divs.get(Math.floor(Math.random() * idx)).id);
			}
		});
	});
});

Note: I've highlighted the additions/changes, but it's easiest just to replace the entire block of code.

[phearfactor]

I don't mind the rel= code way to do it. I'll keep what I got and call it done.

Thanks again!