Using .hide() and .show() in jQuery
<p>In my program I have several very similar drop-down menus all with the same name (foo in the following example). On change they hide or show a nearby div tag depending on whether or not "ON" was selected.</p>

<pre><code>$('.togClass').hide();
        $('[name*="foo"]').change(function(){
            if ($('[value="ON"]').is(':selected')) {
                $('.togClass').show('blind', 1000);
            } else {
                $('.togClass').hide(1000);
            } 
        });
</code></pre>

<p>As it is, all of the div tags with class "togClass" toggle when <em>any</em> of the drop down menus choose "ON", is there a way that I can choose to show/hide only the <em>nearby</em> div to the drop-down that chooses "ON"(they are nested in the same div)? I don't want to write a copy of this function for every div I want to hide.</p>

<p>Here is how it works in the HTML:</p>

<pre><code>&lt;select name="foo"&gt;
    &lt;option value="OFF"&gt;OFF&lt;/option&gt;
    &lt;option value="ON"&gt;ON&lt;/option&gt;
&lt;/select&gt;&lt;br/&gt;
&lt;div class="togClass"&gt;
    //Stuff
&lt;/div&gt;
</code></pre>
