Animated Collapse - Help with show/hide multiple div's or group

[MEAR]

1) Script Title: Animated Collapsible DIV v2.4

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

3) Describe problem: I'm doing a multiple animated div page where i'd like to have a simple image with rollover effect.

The initial onclick would be a call to hide a specific group of id's. I have this working with the following:


<a href="javascript:animatedcollapse.show(unique_group_of_IDs)"><img src="sample_state1.png"></a>

and to hide:


<a href="javascript:animatedcollapse.hide(unique_group_of_IDs)"><img src="sample_state2.png"></a>

The "unique_group_of_IDs" is being created by an earlier thread on DD with the following:


Inside your for loop you can also store the ids of all the auto generated ids, then pass them into functions show() and hide(). For example:

var divids=[]
for (var x=1; x<=3; x++){
animatedcollapse.addDiv('unique_group_of_IDs'+x, 'fade=0,height=210px')
divids.push('unique_group_of_IDs'+x)
}

Then:

<a href="javascript:animatedcollapse.show(divids)">Show all</a>

So! The question is how can I have one image/image rollover and link a call to that js command and then swap to another image/image rollover and then toggle the unique id while staying on the same page? There is this option as shown on the main script page but it only works for one div and not for a group.

[MEAR]

Or simply put,

How can I have the following do multiple div toggles:


<a href="#" rel="toggle[MUTIPLE_DIV_ID]" data-openimage="images/dealdetail/close_on.png" data-closedimage="images/dealdetail/open_on.png"><img src="images/dealdetail/close_on.png" /></a>

[ddadmin]

Sorry for the delay. If I understand you correctly, you want to create a single link that mass toggles the states of multiple DIVs when clicked on. If so, try adding the below script to the HEAD section of your page:


<script type="text/javascript">

function masstoggle(link, dividsarr){
var $div1=jQuery('#'+dividsarr[0])
var img=jQuery(link).find('img:eq(0)').get(0)
if ($div1.css('display')=="block"){ //collapse all?
animatedcollapse.hide(dividsarr)
img.src="expand.jpg"
}
else{ //expand all?
animatedcollapse.show(dividsarr)
img.src="collapse.jpg"
}
}

</script>

Change "expand.jpg" and "collapse.jpg" above to the paths of your own images. Then define a link that calls this function:


<a href="#" onClick="masstoggle(this, List_of_ids_array); return false"><img src="expand.jpg" /></a>

Where "List_of_ids_array" is an array of IDs corrsponding to the DIVs you wish to expand/collapse all at once, for example:


<a href="#" onClick="masstoggle(this, ['jason', 'kelly', 'michael']); return false"><img src="expand.jpg" /></a>

[MEAR]

Wow. That was is. 4 days of trying all sorts of work-arounds. I think that this should be part of the install option on the project page as well. But that's just me. Thanks so much for getting back to me and helping to end days of hellish noobishisness.

Consider this thread RESOLVED.

-M