how can i optimise the following jquery logic

Question

I am having the following jquery logic. i want to make it more concise or optimise it. by using arrays.

function toggleStudyFields(service_type) {
  if (service_type == "Study") {
    $("#study_or_migrate").addClass("hidden");
    $("#study-fields").removeClass("hidden");
    $("#fields-except-visa").removeClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  } else if (service_type == "Visa") {
    $("#study_or_migrate").addClass("hidden");
    $("#fields-except-visa").addClass("hidden");
    $("#visa-fields").removeClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  } else if (service_type == "Coaching") {
    $("#study_or_migrate").addClass("hidden");
    $("#fields-except-visa").addClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").removeClass("hidden");
  } else if (service_type == "Invest") {
    $("#study_or_migrate").addClass("hidden");
    $("#fields-except-visa").removeClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  } else {
    $("#study_or_migrate").removeClass("hidden");
    $("#fields-except-visa").removeClass("hidden");
    $("#visa-fields").addClass("hidden");
    $("#study-fields").addClass("hidden");
    $("#coaching-fields").addClass("hidden");
  }
}

i don't know how to optimise the logic. can someone help me with this.

Answer 1

Because addClass is much more common than removeClass, I'd suggest making an object indexed by service_type, whose values are selectors which indicate which classes should be removed. Add hidden to all elements, and remove them from the elements given by the selector string in the object:

const removeHiddenFrom = {
  Study: '#study-fields, #fields-except-visa',
  Visa: '#visa-fields',
  Coaching: '#coaching-fields',
  Invest: '#fields-except-visa',
}
const defaultRemoveHiddenFrom = '#study-or-migrate, #fields-except-visa';

function toggleStudyFields(service_type) {
  $('#study-or-migrate, #study-fields, #fields-except-visa, #visa-fields, #coaching-fields')
    .addClass('hidden');
  if (removeHiddenFrom[service_type]) {
    $(removeHiddenFrom[service_type]).removeClass('hidden');
  } else {
    $(defaultRemoveHiddenFrom).removeClass('hidden');
  }
}

Answer 2

try this.

function toggleStudyFields(service_type) {
        $("#study_or_migrate").addClass("hidden");
        $("#study-fields").addClass("hidden");
        $("#fields-except-visa").addClass("hidden");
        $("#visa-fields").addClass("hidden");
        $("#coaching-fields").addClass("hidden");

        switch (service_type) {
            case "Study":
                $("#study-fields").removeClass("hidden");
                $("#fields-except-visa").removeClass("hidden");
                break;
            case "Visa":
                $("#visa-fields").removeClass("hidden");
                break;
            case "Coaching":
                $("#coaching-fields").removeClass("hidden");
                break;
            case "Invest":
                $("#fields-except-visa").removeClass("hidden");
                break;
            default:
                $("#study_or_migrate").removeClass("hidden");
                $("#fields-except-visa").removeClass("hidden");
                break;
        }
    }