PDA

View Full Version : Resolved 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/dynamicindex17/animatedcollapse.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 (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse_suppliment.htm) 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:


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


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


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


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 )