Multiple Animated Collapsible DIV

[Mobius1]

1) Script Title: Animated Collapsible DIV v2.4

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

3) Describe problem:

Greetings


I've integrated the Animated Collapsible DIV v2.4 into my site.

I've put the html code in the postbit (the block above everyone's post with the users info, avatar, rank, etc). Problem is, in order for the script to work in every postbit on the page, I need to add a variable otherwise the script only works in the first post.

The variable is {postid} and it's function is to call for the post id. Without the post id, clicking the expand button in any of the postbits causes the first instance at the top of the page to expand.

Where would I need to add this variable in order for it to work in all posts?


javascript

<script type="text/javascript">

animatedcollapse.addDiv('expCol', 'fade=1')

animatedcollapse.ontoggle=function($, divobj, state)

}

animatedcollapse.init()

</script>

html

<table border="1"  valign="left" width="100%" bordercolor="121212" bgcolor="1b1b1b" rules="rows" frame="box">

<th>

<td><a href="javascript:animatedcollapse.toggle('expCol')"><b><span style="color:#ff6600">Experience</span></b> (click)</a>

<div id="expCol" style="width: 100%; display:none">{vb:raw post.xpbr}</br></div></td>

</th>

</table>

[jscheuer1]

Both the script code and HTML code in your post are invalid. The script has a function:

animatedcollapse.ontoggle=function($, divobj, state)

}

with no body. It should at least be (it will then be valid, but still will do nothing):

animatedcollapse.ontoggle=function($, divobj, state){

}

The way it is produces an error. It may only be a non-fatal error, but it might be fatal (stop script processing from that point on) in some or all browsers.

The HTML code has a td element within a th element and a th element without a tr parent. The parent of a td or th element must be a tr element. In the case of the th, the way it is there, the tr might be assumed. But after that, if it displays at all as expected, it's due to the browser error correcting it. Different browsers will most likely treat the code differently. In other words, not all browsers display non-standard code in the same way - their error correcting routines vary.

Now, once you have that sorted out, I see you have (highlighted):

<div id="expCol" style="width: 100%; display:none">{vb:raw post.xpbr}</br></div></td>

That appears to be some sort of server side token that is getting the content (in this case "users info, avatar, rank, etc", I guess) into the page.

To do what you want, the id "expCol" needs to be unique for each post. And it needs to appear in the javascript as well with a separate:

animatedcollapse.addDiv('the_id_whatever_it_is', 'fade=1')

for each one. This can probably best be done on the server side with a loop or loops of some sort with a token that increments this id in both the posts and in the javascript. But might be able to be worked out in some fashion using javascript once the page has been loaded.

It would probably be easier to help if we could see the actual page. That is if what I've relayed so far isn't enough for you to go on.

[Mobius1]

Strange, but it works even with the error you noted. I've rectified it anyway.

Here is an image of the page:




The phrase I need to use is {vb:raw post.postid} to allow each expandable table to function in all of the postbits and not just the first one. Problem is, I don't know were to put it.

[jscheuer1]

Well then, you can probably just get rid of it. I said it may only be a non-fatal error.

If you don't know how to make the loop for the javascript on the server side, then you can try -

Get rid of this:

<script type="text/javascript">

animatedcollapse.addDiv('expCol', 'fade=1')

animatedcollapse.ontoggle=function($, divobj, state)

}

animatedcollapse.init()

</script>

If it was in the existing loop for the posts, change it to:

<script type="text/javascript">
animatedcollapse.addDiv('expCol{vb:raw post.postid}', 'fade=1');
</script>

And at the end of the page, just before the closing </body> tag, put this:

<script type="text/javascript">
animatedcollapse.init()
</script>

Otherwise, if it was not in a loop and just in the head, instead simply replace it with:

<script type="text/javascript">
jQuery(function($){
	$('div[id^=expCol]').each(function(){
		animatedcollapse.addDiv(this.id, 'fade=1');
	});
	animatedcollapse.init();
});
</script>

In either case, change the HTML to:

<table border="1"  valign="left" width="100%" bordercolor="121212" bgcolor="1b1b1b" rules="rows" frame="box">

<tr>

<td><a href="javascript:animatedcollapse.toggle('expCol{vb:raw post.postid}')"><b><span style="color:#ff6600">Experience</span></b> (click)</a>

<div id="expCol{vb:raw post.postid}" style="width: 100%; display:none">{vb:raw post.xpbr}</br></div></td>

</tr>

</table>

Note: I've also changed the th's to valid tr's. But! Even though that's now valid HTML code, it might not work out layout-wise and/or appearance (style)-wise. If not, you can try changing the <td> </td> in the above to <th> </th>.

BTW, when I said "see the page", I meant see the page, not see a picture of it. There's a good chance this will work though. But if you want more help, please post a link to a page on your site that contains the problematic code so we can check it out.

[Mobius1]

Thanks so much for your help, that worked perfectly!