Hide/Unhide DIV with JQuery

Question

I'm pulling the variables from a database and the values could either be Manual or Automatic . Users can also use a dropdown to change the values.

If the value is already Manual I need it to unhide a DIV or if it was Automatic and the user switches to Manual I need to unhide a DIV.

What I have currently only unhides if it was Automatic and user selects Manual .

Here is a JSFiddle: http://jsfiddle.net/DTcHh/5031/

Any help would be appreciated.

Thanks!

HTML:

<form class="form-horizontal" method="post">
<div class="form-group">
    <label class="col-md-5 control-label" for="method">Method:</label>
    <div class="col-md-6">
        <select id="method" name="method" class="form-control">
            <option value="Automatic">Automatic</option>
            <option value="Manual">Manual</option>
        </select>
    </div>
</div>
<div id="manual" class="panel panel-default" style="display:none">
    <div class="panel-heading">
        <h4 class="panel-title">
            Manual
        </h4>
    </div>
    <div class="panel-body">
        <div class="form-group">
            <label class="col-md-5 control-label" for="activitycomplete">Activity Complete:</label>
            <div class="col-md-6">
                <select id="activitycomplete" name="activitycomplete" class="form-control">
                    <option value="False">False</option>
                    <option value="True">True</option>
                </select>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
<div class="form-actions">
    <button type="submit" class="btn btn-success">Update</button>
    <button type="button" data-dismiss="modal" class="btn btn-default">Back</button>
</div>
</form>

JQuery:

$(document).ready(function () {
    $('#method').change(function () {
        $('#manual').toggle(500);
    });
//$("#method").val('Manual');
});

Answer 1

There's no logic in the code which actually checks the value. Basically, this rule isn't implemented:

If the value is already Manual I need it to unhide a DIV or if it was Automatic and the user switches to Manual I need to unhide a DIV.

The code is assuming that the initial value is always "Automatic" and that there will always ever be a one-way-or-the-other switch between the two values. This assumption is incorrect.

Instead of assuming the value and just toggling, explicitly show/hide based on the inspected value:

$('#method').change(function () {
    if ($(this).val() == 'Manual') {
        $('#manual').show(500);
    } else {
        $('#manual').hide(500);
    }
});

Which you can extract into a function so it can be invoked manually as well:

var toggleDiv = function () {
    if ($('#method').val() == 'Manual') {
        $('#manual').show(500);
    } else {
        $('#manual').hide(500);
    }
}
$('#method').change(toggleDiv);

Then you can invoke it when the page first loads as well:

$("#method").val('Manual');
toggleDiv();

Example here .

Answer 2

You'll want to check the value of the dropdox and on page load if it is manual run the toggle function:

$(document).ready(function () {
    $('#method').change(function () {
        $('#manual').toggle(500);
    });
    var valueOfDropDown = $('#method').val();
    if(valueOfDropDown === "Manual"){
        $('#manual').toggle(500);
    }
});

This will obviously show the box on once the dom is ready.