I'm using the mootools fx.slide feature and am having difficulty incorporating it into my existing js.
I need to be able to have each div's 'options' link slide open (like in the options_1 div), and it ain't happenin'.

Code:
<!-- mootools 1.11 -->
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
var elCount = 2;

/* mootools vertical div slide */
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('options_1',{duration:300});
	document.getElementById('options_1').style.visibility = "hidden";
	document.getElementById('options_1').style.display = "block";
	mySlide.hide();
	document.getElementById('options_1').style.visibility = "visible";
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
});


function add() {
	var parent = document.getElementById('parent');
	
	/* creating new article div */
	var article = document.createElement('DIV');
	var inntertext = "";
	
	/* setting new div id and name attributes */
	article.id = 'article_' + elCount;
	article.name = 'article_' + elCount;

	/* preparing new article form */
	inntertext += '<div class="outer">';
	inntertext += '<div class="label"><h2>Article ' + elCount + '</h2></div><br />';
	inntertext += '<div class="label">Headline:</div><div class="input"><input type="text" name="art_headline[]" id="art_headline[]" class="textfield_lg" /></div><br />';
	inntertext += '<div class="label">Text:</div><div class="input"><textarea name="art_txt[]" id="art_txt[]"></textarea></div><br />';
	inntertext += '<div class="label">Image:</div><div class="input"><input type="file" name="art_img[]" id="art_img[]" /></div><br />';
	inntertext += '<div class="label"><a id="toggle" href="#">options</a></div><br />';
	inntertext += '<div id="options_1" style="display:none">';
	inntertext += '<table>';
	inntertext += '<tr>';
	inntertext += '<td class="label">Pod:</td><td><input type="checkbox" name="art_is_pod[]" id="art_is_pod[]" /></td>';
	inntertext += '</tr>';
	inntertext += '<tr>';
	inntertext += '<td class="label">Truncate:</td><td><input type="text" name="art_trunc_txt[]" id="art_trunc_txt[]" value="" class="textfield_sm" /> words</td>';
	inntertext += '</tr>';
	inntertext += '<tr>';
	inntertext += '<td class="label">Link Text:</td><td><input type="text" name="art_rm_txt[]" id="art_rm_txt[]" value="read more" class="textfield_med" /></td>';
	inntertext += '</tr>';
	inntertext += '<tr>';
	inntertext += '<td colspan="2"><div class="remove_article"><a href="javascript:remove(article_' + elCount + ');">remove this article</a></div></td>';
	inntertext += '</tr>';
	inntertext += '</table>';
	inntertext += '</div>';
	inntertext += '</div>';
	
	/* setting innerHTML of new div */
	article.innerHTML = inntertext;
	
	/* appending the new div to parent */
	parent.appendChild(article);
	elCount++;
}

function remove(el){
	if(typeof(el) == 'string')
	el = document.getElementById(el);
	var parent = el.parentNode;
	parent.removeChild(el);
}
</script>
</head>
<body>
<form action="" method="post">
<div id="parent">
<div class="outer">
<div class="label"><h2>Article 1</h2></div><br />
<div class="label">Headline:</div><div class="input"><input type="text" name="art_headline[]" id="art_headline[]" class="textfield_lg" /></div><br />
<div class="label">Text:</div><div class="input"><textarea name="art_txt[]" id="art_txt[]"></textarea></div><br />
<div class="label">Image:</div><div class="input"><input type="file" name="art_img[]" id="art_img[]" /></div><br />
<div class="label"><a id="toggle" href="#">options</a></div><br />
<div id="options_1" style="display:none">
<table>
	<tr>
		<td class="label">Pod:</td><td><input type="checkbox" name="art_is_pod[]" id="art_is_pod[]" /></td>
	</tr>
	<tr>
		<td class="label">Truncate:</td><td><input type="text" name="art_trunc_txt[]" id="art_trunc_txt[]" value="" class="textfield_sm" /> words</td>
	</tr>
	<tr>
		<td class="label">Link Text:</td><td><input type="text" name="art_rm_txt[]" id="art_rm_txt[]" value="read more" class="textfield_med" /></td>
	</tr>
	<tr>
		<td colspan="2"><div class="remove_article"><a href="javascript:remove('article_1');">remove this article</a></div></td>
	</tr>
</table>
</div>
</div>
</div>
<div class="add_article"><a href="javascript:add();">add another article</a></div><br />
<input type="hidden" name="newsletter_id" value="32" />
<input type="submit" name="submit" value="submit">
</form>