Hide Groups Easily with Animated Collapse?

[mda]

Animated Collapse

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Is there a quick way to hide every div that belongs to a group without listing each one individually?

for example:

With a few more divs,
animatedcollapse.hide(['cat', 'dog', 'rabbit' ]) will get a bit much quickly and would be much better achieved using something like:
animatedcollapse.hide(['pets' ])

Or should I just add a class to the relevant divs and use a link to hide them without the animation?

Thanks

[ddadmin]

There are a couple of threads that may help you:

http://www.dynamicdrive.com/forums/showthread.php?t=48782
http://www.dynamicdrive.com/forums/showthread.php?t=54044

If they don't let me know.

[jscheuer1]

Put this highlighted code on your page after the animatedcollapse.init() call from Step 1 on the demo page:


<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')
animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
animatedcollapse.addDiv('michael', 'fade=1,height=120px')

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
}

animatedcollapse.init()

animatedcollapse.hideGroup = function(groupName){
var ids = [];
for(var p in animatedcollapse.divholders){
if(animatedcollapse.divholders[p].getAttr('group') === groupName){
ids.push(p);
}
}
animatedcollapse.hide(ids);
};

</script>

Now you can collapse any group by its group name, example:


<a href="javascript:animatedcollapse.hideGroup('pets')">Hide Pets</a>