jQuery: show() and hide() in order?

Question

I have an area where a chunk of HTML (shown below) is added dynamically as many times as the user would like. No worries there. The problem is, within that HTML block is a select box and then a div that is hidden by default but should be shown if the "dropdown" option is selected from the select menu.

<div>
    <select name="" class="select_change">
      <option value="">--Select One--</option>
      <option value="textarea">Text Area</option>
      <option value="textbox">Text Box</option>
      <option value="checkbox">Check Box</option>
      <option value="dropdown">Drop Down</option>
    </select>
</div>
<div class="dropdown_fields hidden">
  <label>Options</label>
  <p><textarea name="" rows="8" cols="40"></textarea></p>
  <p class="field_desc">Please enter the values that should display in the Drop Down, one per line.</p>
</div>

So, the problem I'm having is showing/hiding that div when there are multiple identical blocks of HTML.

What I'm assuming is I need to say that the div right after the select menu that was invoked is the only one that needs to have action applied to it...but I'm not sure how to do that.

Answer 1

Change your select opening tag to the following:

<select name="" class="select_change" onchange="if ($(this).val() == 'dropdown') { $(this).closest('div').next('div').removeClass('hidden'); } else { $(this).closest('div').next('div').addClass('hidden'); }">

Answer 2

You could do something like this:

$('select.select_change').change(function(e){
    $(this).parent('div').next('div.dropdown_fields').removeClass('hidden');
});

Answer 3

Assuming the toggle-able div follows the selects parent (as indicated by your example):

$(".select_change").live("change", function(){
  $(this).val() === "dropdown" 
    ? $(this).parent().next().show() 
    : $(this).parent().next().hide();
  }
});