Question

I have the following html that when a user selects leasehold additional form fields appear:

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

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

The jQuery I am attempting to use and adapt is:

$(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');
        }
    });
});

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

Answer 1

You should use a wrapper element:

<div class="wrapper">
    <label for="hold_type">Leasehold / Freehold: </label>
    <select id="hold_type" name="hold_type">
      <option value="null">--</option>
      <option value="lease">Leasehold</option>
      <option value="free">Freehold</option>
    </select>
    <span class="required">*</span>

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

and the javascript:

$(document).ready(function() {
    $(".section_hidden").hide(0);

    $("select#hold_type").change(function() {
        var $section_hidden = $(".section_hidden", $(this).closest(".wrapper"));
        if ($('select#hold_type option:selected').val() == "lease") {
            $section_hidden.fadeIn("fast");
            $.cookie('holdSection', 'expanded');
        } else {
            $section_hidden.fadeOut("fast"); //Slide Down Effect
            $.cookie('holdSection', 'collapsed');
        }
    });
});