Question

I am using this code: http://jsfiddle.net/q3nUS/

$('#cf11_field_20').change(function() {
  $("#li-11-22")[$(this).val() == "full03_accommodation_hotel" ? 'show' : 'hide']("fast");
}).change();

$('#cf11_field_22').change(function() {
  $("#li-11-23")[$(this).val() == "full03_hotel_other" ? 'show' : 'hide']("fast");
}).change();

It works fine so that the text field only appears when:
in the first dropdown “Hotel” is selected AND in the second dropdown “Other” is selected.

But once you change the first dropdown to something other than “Hotel”, I obviously need to have both other fields to hide. Currently, the text field remains.

How do I change the code that the text field also gets hidden?
I know how to do it logically but I’m having problems with the syntax.

I tried something like this:

    $('#cf11_field_20').change(function() {
      $("#li-11-22")[$(this).val() == "full03_accommodation_hotel" ? 'show' : 'hide']("fast");
      $("#li-11-23")[$(this).val() != "full03_accommodation_hotel" ? 'hide']("fast");
    }).change();  
    $('#cf11_field_22').change(function() {
      $("#li-11-23")[$(this).val() == "full03_hotel_other" ? 'show' : 'hide']("fast");
    }).change();

Really having problems with proper syntax here.
Thanks!

Answer 1

When you use the condition ? value if true : value if false after a condition, you cannot omit :, otherwise it is a syntax error (what happens when condition is false?). If you don’t want anything to happen when the condition is false, use an if statement instead, like so (http://jsfiddle.net/q3nUS/2/):

if ($(this).val() != "full03_accommodation_hotel") $("#li-11-23").hide("fast");

Hope this helps.