Question

I was helped with some code here. I tweaked it to try and hide a whole div instead of an element. It was only a small tweak but I seem to have done something to stop it working.

HTML

<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
<div id="added_fields">
    <select name="menu-168" class="wpcf7-validates-as-required">
        <option value="Residential">Residential</option>
        <option value="Commercial">Commercial</option>
    </select>
</div>

JS

if ($("select[name='menu-168']").val() == "Commercial") {
    $("#added_fields").addClass("hidden");
}​

Would someone be kind enough to tell me where I have gone wrong?

Answer 1

You need to do the check of the select value when it changes.

I want to hide the input box not the select box im afraid

In that case you need to change the #added_fields selector. Try this:

$("select[name='menu-168']").change(function() {
    if ($(this).val() == "Commercial") {
        $('#added_fields').addClass("hidden");
    }
    else {
        $('#added_fields').removeClass("hidden")
    }
});

Example fiddle