Toggling display of a div with jQuery

Question

I have two links, one with id #calendar_arrival_open and another with #calendar_departure_open. Both links control whether or not a div containing a calendar is displayed, but in both cases the calendar displayed is the same calendar, to avoid loading two identical calendars. I'm trying to use the following code to toggle the opening and closing of the calendar when the links are clicked.

var state = "closed";
if(state == "closed"){
    $("#calendar_arrival_open").click(function () {
        $("#calendar_box").show();
        $("#select_arrival_date").show();
        $("#select_departure_date").hide();
        state = "arrival_open";
    });
    $("#calendar_departure_open").click(function () {
        $("#calendar_box").show();
        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";
    });
}

if(state == "arrival_open"){
    $("#calendar_arrival_open").click(function () {
        $("#calendar_box").hide();
        state = "closed";
    });
    $("#calendar_departure_open").click(function () {
        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";
    });
}

if(state == "departure_open"){
    $("#calendar_arrival_open").click(function () {
        $("#calendar_box").hide();
        $("#select_departure_date").hide();
        $("#select_arrival_date").show();
        state = "arrival_open";
    });
    $("#calendar_departure_open").click(function () {
        $("#calendar_box").hide();
        state = "closed";
    });
}

This code works for opening the calendar, but not for closing it. I can't see why. As you can see, if the "arrival calendar" is open and the departure calendar link is clicked, the "departure calendar" appears, and vice-versa. However, if the arrival calendar is open and the arrival calendar link is clicked, then the calendar closes.

Can anyone see the problem? Is this "state" method the best for handling what I need?

Answer 1

You could use a switch block to achieve this. I'm not sure if that's quicker programatically, but it looks easier to maintain to me.

This obviously needs to be placed inside a $(document).ready() handler.

var state = "closed";

$("#calendar_arrival_open").click(function () {

switch(state){

case "closed":
    $("#calendar_box").show();
    $("#select_arrival_date").show();
    $("#select_departure_date").hide();
    state = "arrival_open"; 
break;
case "arrival_open":
    $("#calendar_box").hide();
    state = "closed";   
break;  
case "departure_open":
    $("#calendar_box").hide();
    $("#select_departure_date").hide();
    $("#select_arrival_date").show();
    state = "arrival_open";
break;  
}
})

$("#calendar_departure_open").click(function () {

switch(state){

case "closed":
    $("#calendar_box").show();
    $("#select_departure_date").show();
    $("#select_arrival_date").hide();
    state = "departure_open";
break;
case "arrival_open":
    $("#select_departure_date").show();
    $("#select_arrival_date").hide();
    state = "departure_open";
break;  
case "departure_open":
    $("#calendar_box").hide();
    state = "closed";
break;  
}
})

Answer 2

The code that runs when a click event occurs must be defined inside a click event handler. On your code, you want the state check to be performed on every click, but you added the if statement outside the event handlers. Then you are stuck with those handlers from your first if block.

Your code says: "when state is x, define a click event handler to do a; when state is y, define a click event handler to do b;".

What you want is: "when an element is clicked, do a if stateis x, or b if state is y".

See the difference?

Answer 3

Try this:

var state = "closed";

$("#calendar_arrival_open").click(function () {
    if(state == "closed"){

        $("#calendar_box").show();
        $("#select_arrival_date").show();
        $("#select_departure_date").hide();
        state = "arrival_open";

    } else if(state == "arrival_open"){

        $("#calendar_box").hide();
        state = "closed";

    } else {

        $("#calendar_box").hide();
        $("#select_departure_date").hide();
        $("#select_arrival_date").show();
        state = "arrival_open";

    }
});

$("#calendar_departure_open").click(function () {
    if(state == "closed"){

        $("#calendar_box").show();
        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";

    } else if(state == "arrival_open"){

        $("#select_departure_date").show();
        $("#select_arrival_date").hide();
        state = "departure_open";

    } else {

        $("#calendar_box").hide();
        state = "closed";

    }
});