Call Animated Collapsible With Select Form

[brock029]

1) Script Title:
Animated Collapsible
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
3) Describe problem:
Trying to show/hide div's from <select>

Hello, I am trying to be able to show/hide div's with a <select> form. For Example:


<select id="e1" style="width:210px">
<option></option>
<option value="">Lost Card</option>
<option value="">Stolen Card</option>
<option value="">Damaged Card</option>
<option value="">Card Found By Stranger</option>
<option value="">Card Status</option>
</select>


<div id="lostcard" style="width: 966px; background: transparent;border: 0;">
Hello im a great idea!
</div>

And of course, in the head section:


<script type="text/javascript" src="../js/animatedcollapse.js"></script>
<script type="text/javascript">
animatedcollapse.addDiv('lostcard', 'fade=0,speed=400,group=gen,hide=1,persist=0')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

I am also wanting to use Select2 3.2 to make custom select menus http://ivaynberg.github.com/select2/index.html.

Here is how the select forms are setup:


<script src="../js/select2.js"></script>
<script>$(document).ready(function() { $("#e1").select2({placeholder: "Cards & Service Requests", allowClear: true}); });</script>
<script>$(document).ready(function() { $("#e2").select2({placeholder: "Transactions", allowClear: true}); });</script>
<script>$(document).ready(function() { $("#e3").select2({placeholder: "General Call Information", allowClear: true}); });</script>

I know the rules say you do not support other scripts but I am just showing that to show that the names of the selects are already being declared. I am new to javascript and have been trying to get this to work for the past few hours. I have gotten this to work with regular links, select forms are a completely different story.

Any help would be greatly appreciated, and if I am missing information just let me know!

[vwphillips]

<select onchange="ShowDiv(this.value);">
<option value="jason" >jason</option>
<option value="kelly" >kelly</option>
<option value="michael" >michael</option>
<option value="|jason,kelly,michael" >hide: jason,kelly,michael</option>
<option value="jason,kelly,michael" >show: jason,kelly,michael</option>
<option value="jason|kelly,michael" >show: jason hide: kelly,michael</option>
</select>



function ShowDiv(txt){
var t,z0=0;
txt=txt.split('|');
if (txt[0]){
var t=txt[0].split(',');
for (;z0<t.length;z0++){
animatedcollapse.show(t[z0]);
}
}
if (txt[1]){
t=txt[1].split(',');
for (z0=0;z0<t.length;z0++){
animatedcollapse.hide(t[z0]);
}
}}