Call Animated Collapsible With Select Form

[brock029]

1) Script Title:
Animated Collapsible
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.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]);
  }
 }}