jquery fadetoggle на нескольких делениях

Хм... это то, что вы ищете? http://jsfiddle.net/itsmikem/uvT76/ Мне нужно было бы исправить "прыткость", но, возможно, это на правильном пути.

HTML:

<div id="dropdown">
    <select id="tables" name="tables[]" onchange="changeHandler()">
        <option value="defcont" selected>Select some content</option>
        <option value="cont1">Content 1</option>
        <option value="cont2">Content 2</option>
        <option value="cont3">Content 3</option>
    </select>
</div>
<p></p>
<div id="paragraphs">
    <div id="paraDefault">This is the default content without selection</div>
    <div id="para_1" class="hidden">You see now content 1.</div>
    <div id="para_2" class="hidden">You see now content 2.</div>
    <div id="para_3" class="hidden">You see now content 3.</div>
</div>

ЯШ:

var opts = $("#tables option");
$('#tables').on("change", fader);

function fader(e) {
    switch (e.target.value) {
        case ("defcont"):
            var others = String("#paragraphs div[id^='para_']");
            $(others).each(function () {
                $(this).fadeTo(250, 0);
            });
            $(others).promise().done(function () {
                $(others).css("display", "none");
                $("#paraDefault").fadeTo(1000, 1);
            });
            break;
        default:
            var showPara = String("para_" + e.target.value.substr(e.target.value.length - 1));
           // alert(showPara);
            var sel = String("#paragraphs div[id!=" + showPara + "]");
            $(sel).each(function () {
                $(this).fadeTo(250, 0);
            });
            $(sel).promise().done(function () {
                $(sel).css("display", "none");
                $(String("#" + showPara)).fadeTo(1000, 1);
            });
    }
}

CSS:

div[id^='para_'] {
    display:none;
}
#dropdown {
    margin-bottom:100px;
}