JQuery UI - How do you do multiple toggles from a listBox?

Question

I have a listbox in a form, and based on the answers within I want to open a different toggle, using JQuery UI's toggle effect: http://jqueryui.com/demos/toggle/. The code is visible under 'view source'.

Part 1: the code in current form does not support multiple toggles on one page. How can I rewrite the javascript and id the divs differently so multiple toggles respond to multiple links?

Part 2: how can I then take a listbox (like below) and get the three options to select from among two toggled divs?

<select class="toggle inputBox listBox" id="select" name="customer[option]"> 
  <option>Choose Your Option</option> 
  <option value="1" rel="toggle[one]"> Option 1</option>
  <option value="2" rel="toggle[one]"> Option 2</option>
  <option value="3" rel="toggle[two]"> Option 3</option>
</select>

Answer 1

1: When you use the HTML id attribute, you must guarantee that no other HTML element on the page has the same ID. You can either use a different id for each toggle:

$('#id1').toggle(...);
$('#id2').toggle(...);
$('#id3').toggle(...);

...or use the class selector to apply the same toggle effect to all 3:

$('div.toggle').toggle(...); //set all 3 to the same state

2: Bind an event listener to the select control. When the select is changed, you can change the state of the toggles by calling toggle() again (look at how runEffect() is implemented in the example). A couple of the jQuery tutorials have good explanations of how to bind events:

http://docs.jquery.com/Tutorials

Answer 2

I'm not 100% sure on your question, but if you just want a different animation based on the selected option you can do something like this

HTML

<div>Hey, what?</div>
<select>
    <option>-</option>
    <option>1</option>
    <option>2</option>
</select>​​​​​​​​​​​​​​​​​​​

jQuery

$('select').change(function() {
    switch (this.selectedIndex) {
    case 0:
        break;
    case 1:
        $('div').fadeOut(300, function() {
            $(this).show();
        });
        break;
    case 2:
        $('div').slideUp(300, function() {
            $(this).show();
        });
        break;
    }
});​

Fiddle

http://jsfiddle.net/HJYYj/

Edit

Just read your question and understood that you want to hide a different element with each option. You can modify the above jQuery pretty easily for that.

Updated Example: http://jsfiddle.net/yrNjS/

Updated Code

$('select').change(function() {
    switch (this.selectedIndex) {
    case 0:
        break;
    case 1:
        $('span').slideUp(500, function() {
            $(this).show();
        });
        break;
    case 2:
        $('div').slideUp(500, function() {
            $(this).show();
        });
        break;
    }
});​