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

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;
    }
});​