Question

I have a simple form which works as intended. It is a multi-step form that only shows one question at a time. When the user clicks on an input field (all radio buttons) they get taken to the next question, which is different depending on what they clicked and then finally they get a submit button after the last question.
I currently have several .click functions, and this works well. However, I am sure it is not the most efficient way to do this, in terms of both writing and performance. Is there a more efficient way to use multiple .click functions?

$('.male').click(function() {
  $('#male').show();
  $('#gender').hide();
});

$('.female').click(function() {
  $('#female').show();
  $('#gender').hide();
});

Answer 1

You could give all of the questions the class of ‘question’ and then each answer could have an id corresponding to a class (or other) property of the upcoming branch you wanted to display.

Therefore each response would hold the name for what to display next for you and you would be able to only have one click handler.

I.e.:

$("input").click(function() {
    $(".question").hide();
    var itemToShow = $(this).attr("id");
    //alert(itemToShow);
    if ($("."+itemToShow).length > 0) {
        $("."+itemToShow).show("normal");
    } else {
        $(".finale").show("normal");
    }
});

You’ll probably need to play around with it a little bit until the control works as you’d like. Here’s a fiddle to work off of.

Update: Here’s the latest fiddle demonstration.