Multiple instances of Fx.Slide in WordPress

Hi,

I have been trying for a few days to use Fx.Slide (mootools 1.2) to show/hide some details for each post. You can see an example of what I want to do here: https://demos.mootools.net/Fx.Slide

The problem is that only the first instance of the first post open while the others remained hidden and won’t open.

Therefore I tried to use the Post->ID to use multiple instances of Fx.slide on the same category page:

<?php // Toggle (show/Hide Details)
$id = $post->ID;
// The CSS
echo "<style type=\"text/css\">#details".$id." {display: block; float: left; clear: both; position: relative; overflow: hidden; visibility:hidden; z-index: 3; height: 0;}</style>";
//The JS : Fx.Slide - Works with Mootools 1.2
echo "<script language=\"JavaScript\">window.addEvent('domready', function(){ </script>";
echo "<script language=\"JavaScript\">$('details".$id."').setStyle('height','auto');</script>";
echo "<script language=\"JavaScript\">var myDetails".$id." = new Fx.Slide('details".$id."').hide();</script>";
//starts the panel in closed state

echo "<script language=\"JavaScript\">$('toggleDetails".$id."').addEvent('click', function(e){e = new Event(e);myDetails".$id.".toggle();e.stop();});</script>"; // Toggle Effect (show/hide details)
echo "<script language=\"JavaScript\">$('closeDetails".$id."').addEvent('click', function(e){e = new Event(e);myDetails".$id.".slideOut();e.stop();}); </script>"; // Close Details DIV
echo "<script language=\"JavaScript\"> }); </script>"; // End Fx.slide
?>

<?php // The Details
$info = get_post_meta($post->ID, "Info", $single = true); if($info !== '') {
echo "<li><b>Details:</b><small><a id='toggleDetails".$id."' href='#'>Show Details</a></small></li>";
echo "<div id='details".$id."'>".$info."<small>[<a id='closeDetails".$id."' href='#'>X</a>] Close</small>
</div>";
}
?>
<!-- DEBUG! -->
<li><?php echo "details".$id; ?></li>
<li><?php echo "myDetails".$id; ?></li>
<li><?php echo "#details".$id; ?></li>
<li><?php echo "toggleDetails".$id; ?></li>
<li><?php echo "closeDetails".$id; ?></li>

This is the end result for the first post (which ID is 263) when closed:

Details:Show Details
details263
myDetails263
details263
toggleDetails263
closeDetails263

However, this doesn’t work. None open.

If I replace “$id = $post->ID;” by ” $id = 0;”, the first instance of the first post will open.

So my question is: what am I doing wrong?

(Sorry, for my English. I hope it is not too confusing what I am saying)