Showing/Hiding div based on selectedItem in dropdown - inside tablist

Question

I have a an editor template which shows some basic information about my model. my models contains a "type" (string) which is loaded into a dropdown "Email"or "Calendar"

my EditorTemplate looks like the following

 <div>
 //Hidden fields here
    <div  class="col-md-5">
        <div>
            @Html.LabelFor(m => m.First)        
        </div>
        <div>
            @Html.TextBoxFor(m => m.First)      
        </div>
        <div>
            @Html.LabelFor(m => m.Second)       
        </div>
        <div>
            @Html.TextBoxFor(m => m.Second)     
        </div>
        <div>
            @Html.LabelFor(m => m.Type)
        </div>
        <div>
            @Html.DropDownListFor(m => m.Type, (SelectList)ViewData["TypeList"], "-- Select --", new { @class = "TypeSelector" })
            @Html.ValidationMessageFor(m => m.Type)
        </div>
    </div>
    <div  class="col-md-5">
        <div class="container">
            <div class="EmailDiv">
                //More data here            
            </div>
            <div class="CalendarDiv">
                //More data here            
            </div>
        </div>
    </div>
 </div>

The EditorTemplate is used inside a tabs, so each enumeration is put inside a separate tab.

I have the following script

$(document).ready(function () {
    $(".EmailDiv").hide();
    $(".CalendarDiv").hide();
    // Set initial visibility
    $('.TypeSelector').each(function (index, item) {
        var container = $('.EmailDiv').closest('.container');
        if ($(this).val() == 'Calendar') {
            container.find('.CalendarDiv').show();
        } else if ($(this).val() == 'Email') {
            container.find('.EmailDiv').show();
        }
    });

    // Update visibiity on selection
    $('.TypeSelector').change(function () {

        var container = $('.EmailDiv').closest('.container');
        if ($(this).val() == 'Calendar') {
            container.find('.CalendarDiv').show();
            container.find('.EmailDiv').hide();
        } else if ($(this).val() == 'Email') {
            container.find('.EmailDiv').show();
            container.find('.CalendarDiv').hide();
        } else { // this may or may not be necessary
            container.find('.EmailDiv').hide();
            container.find('.CalendarDiv').hide();
        }
    });

});

My problem is;

When my model contains 2 items with different "types" (Email, Calendar) the view shows both divs until i select another type in the dropdown, then it shows the div corresponding to that selection, but in all of the tabs, it doesnt differ in different tabs, even though the type is different.

Answer 1

Your code is getting all <div class="container"> not just the one associated with the EditorTemplate. Change the top level div to give it a class name

<div class="maincontainer"> // change this
  //Hidden fields here
  .....
  </div>
  <div  class="col-md-5">
    <div class="container">
      <div class="EmailDiv">         
      </div>
      <div class="CalendarDiv">          
      </div>
    </div>
  </div>
</div>

Then adjust the script

$(".EmailDiv").hide();
$(".CalendarDiv").hide();
// Set initial visibility
$('.TypeSelector').each(function (index, item) {
    var container = $(this).closest('.maincontainer').find('.container'); // change this
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
    }
});

// Update visibility on selection
$('.TypeSelector').change(function () {
    var container = $(this).closest('.maincontainer').find('.container'); // change this
    if ($(this).val() == 'Calendar') {
        container.find('.CalendarDiv').show();
        container.find('.EmailDiv').hide();
    } else if ($(this).val() == 'Email') {
        container.find('.EmailDiv').show();
        container.find('.CalendarDiv').hide();
    }
});