Hide current container depending on dropdown selection
<p>I have the following html that when a user selects leasehold additional form fields appear:</p>

<pre><code>&lt;label for="hold_type"&gt;Leasehold / Freehold: &lt;/label&gt;
&lt;select id="hold_type" name="hold_type"&gt;
  &lt;option value="null"&gt;--&lt;/option&gt;
  &lt;option value="lease"&gt;Leasehold&lt;/option&gt;
  &lt;option value="free"&gt;Freehold&lt;/option&gt;
&lt;/select&gt;
&lt;span class="required"&gt;*&lt;/span&gt;

&lt;div class="section_hidden"&gt;
    &lt;label for="lease_remaining"&gt;Years remaining on lease: &lt;/label&gt;
    &lt;input type="text" id="lease_remaining" name="lease_remaining" value="&lt;?php if(isset($_SESSION['enquiryData']['lease_remaining'])); ?&gt;" /&gt;
    &lt;span class="required"&gt;*&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>The jQuery I am attempting to use and adapt is:</p>

<pre><code>$(document).ready(function() {
    $(".section_hidden").css("display", "none");
    $("select#hold_type").change(function() {
        if ($('select#hold_type option:selected').val() == "lease") {
            $('.section_hidden').fadeIn("fast");
            $('.section_hidden').css("display", "block");
            $.cookie('holdSection', 'expanded');
        } else {
            $(".section_hidden").fadeOut("fast"); //Slide Down Effect
            $(".section_hidden").css("display", "none");
            $.cookie('holdSection', 'collapsed');
        }
    });
});
</code></pre>

<p>There are more that one <code>section_hidden</code> divs on the page, hence the user selection should only show the <code>div.section_hidden</code> container that is below it rather the entire page. I have tried a combination of <code>closest()</code>, <code>find()</code> and <code>next()</code> but haven't managed to get the desired result.</p>
