animated collapse to trigger 2 divs

**justinb** · 12-04-2009, 08:25 PM

1) Script Title: animated collapse

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

3) Describe problem:

Hello,
I was hoping to make my animated collapse trigger 2 divs when clicked... so the menu will change as well as a text area somewhere else...

this is the standard code
<a href="#" rel="toggle[menu]" >

i tried this with no luck
<a href="#" rel="toggle[menu] toggle[product_display] " >

**ddadmin** · 12-04-2009, 10:23 PM

Your best bet would be to use the ontoggle event handler of the code and have it expand/contract the arbitrary DIV based on the status of a particular animated collapsible DIV. Here's an example:

Code:

<script type="text/javascript">

animatedcollapse.addDiv('jason', 'fade=1,height=80px')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	if (divobj.id=="jason"){
		if (state=="block")
			$('#somediv').show()
		else
			$('#somediv').hide()
	}
}

animatedcollapse.init()

</script>

<body>


<a href="javascript:animatedcollapse.toggle('jason')"><img src="toggle.jpg" border="0" /></a> <a href="javascript:animatedcollapse.show('jason')">Slide Down</a> || <a href="javascript:animatedcollapse.hide('jason')">Slide Up</a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br />
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br />
</div>

<div id="somediv" style="margin-top:1em;height:150px;border:1px solid black;background:lightblue">
Some DIV
</div>

As you toggle the "jason" DIV, the arbitrary DIV "somediv" gets shown or hidden based on the status of the former.

**justinb** · 01-05-2010, 07:42 PM

Hello,

thanks for the response, I am unable to get this to work.

My file has been hacked and is fairly complex now, i have 3 levels of menu all using the animated collapse and PHP DataBase driven menu items and triggered using rel, a sample below...

<a href="#" rel="toggleprod[Product<?php echo $row_Recordset_events_menu['events_id']; ?>]" class="product">

is their any way to do this by just adding to what I have?

**justinb** · 01-05-2010, 08:06 PM

Hello,

I have made some progress, the problem arises with the database driven items as i cant repeat the function for each item...

I use a recordset loop to write my Product divs..

Code:

animatedcollapse.addDiv('Events', 'fade=0,speed=400,group=pets,persist=1,hide=1')
animatedcollapse.addDiv('Videos', 'fade=0,speed=400,group=pets,hide=1')

<?php do {  ?>

animatedcollapse.addDiv('Products<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>', 'fade=0,speed=400,group=pets,hide=1')


<?php  } while ($row_Recordset_get_menu_java_cat = mysql_fetch_assoc($Recordset_get_menu_java_cat)); ?>

Now Events and Videos work perfectly, but products are always shown...

Code:

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	
	if (divobj.id=="Products<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>"){
		if (state=="block")
			$('#ProductDiv<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>').show()
		else
			$('#ProductDiv<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>').hide()
	}
	
	
	if (divobj.id=="Events"){
		if (state=="block")
			$('#EventsDiv').show()
		else
			$('#EventsDiv').hide()
	}
	
	
	if (divobj.id=="Videos"){
		if (state=="block")
			$('#VideosDiv').show()
		else
			$('#VideosDiv').hide()
	}
	
	
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
}

animatedcollapse.init()

I need to somehow get the

Code:

if (divobj.id=="Products<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>"){
		if (state=="block")
			$('#ProductDiv<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>').show()
		else
			$('#ProductDiv<?php echo $row_Recordset_get_menu_java_cat['product_cat_id']; ?>').hide()
	}

inside my loop without repeating the entire function over and over again... am i making sense?

**justinb** · 01-05-2010, 08:18 PM

Sorry i figured it out, thanks for the help ( i just re-looped )

Thread: animated collapse to trigger 2 divs

Thread Tools

Search Thread

animated collapse to trigger 2 divs

Bookmarks

Bookmarks

Posting Permissions