Group Does Not Hide

[jessyhanley]

1) Script Title: Animated Collapsible DIV v2.4

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:
- We have a large group of "thumbnails" that display our large list of potential themes.
- A nav on the left that shows the next group of thumbs (using the Animated Collapsible code) For example "holiday themes"
- The functionality works in every way... except that the newly displayed div shows up AFTER the current one, instead of replacing the series of thumbnails.

You can see our code here:

http://dynamicdrivetest.myphotostage.com/setup/shortform.php
Username : dynamicdrivetest
Password : 112233
Select Theme & Colors from the overall personalization nav on the left hand side of the page
Click on a few of the theme categories





Oddly enough, when I remove all the thumbnails and just insert the sample code below, it works fine.

Are there display limitations in the divs that can be displayed?
Is there something else wrong with the thumbnail code that is not allowing it to be replaced?



Sample code that works


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 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 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 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>






Cheers,
Jessy

[jscheuer1]

This is really a strange one. I kept thinking that there was something wrong with the markup, but I can't see anything. You do have the animatedcollapse.js file associated with the page twice (two external script tags pointing to it), but (though it should be done anyway) removing one of them didn't improve things. I put the pets on the page to test your assertion about them, and they worked properly as you said, in fact they worked properly right along side group=themegroups which still worked wrong. I made group=themegroups part of the pet group, then none of it worked right.

So I went back to the start, minus the extra external tag to animatedcollapse.js, and made up a fudge (additions highlighted):


. . . llapse.addDiv('scrap', 'fade=0,speed=0,group=themegroups,hide=1')
animatedcollapse.addDiv('flowerthemes', 'fade=0,speed=0,group=themegroups,hide=1')
animatedcollapse.addDiv('largepattern', 'fade=0,speed=0,group=themegroups,hide=1')
animatedcollapse.addDiv('bubble', 'fade=0,speed=0,group=themegroups,hide=1')
animatedcollapse.addDiv('solidclub', 'fade=0,speed=0,group=themegroups,hide=1')
animatedcollapse.addDiv('smallpattern', 'fade=0,speed=0,group=themegroups,hide=1')
animatedcollapse.addDiv('camo', 'fade=0,speed=0,group=themegroups,hide=1')

animatedcollapse.init()

animatedcollapse.mythemegroups = ['featured', 'mpathemes', 'solid', 'pallette',
'spring', 'summer', 'autumn', 'thewinter', 'holidays', 'wed', 'babykid',
'sports', 'scrap', 'flowerthemes', 'largepattern', 'bubble', 'solidclub',
'smallpattern', 'camo'];

animatedcollapse.fudge = function(){
for(var i = 0; i < animatedcollapse.mythemegroups.length; ++i){
document.getElementById(animatedcollapse.mythemegroups[i]).style.display = 'none';
}
}

</script>

Then wherever there was (and similar):


href="javascript:animatedcollapse.show('featured')"

I made it like:


href="javascript:animatedcollapse.fudge();animatedcollapse.show('featured')"

That took care of things in Firefox, and probably will do so in others as well.

I'm not real happy with it. I feel like I must be missing something. But there are so many other scripts on the page. One or more of them might have something to do with it. It would be very hard to tell.