Question

I have a number of message elements that come in pairs: If element A1 is shown, then A2 should be hidden, same for B1/B2, C1/C2, and so on. I have the jQuery code working, but it gets verbose:

if (conditionA) {
    $("#a1").show();
    $("#a2").hide();
else {
    $("#a1").hide();
    $("#a2").show();
}

if (conditionB) {
    $("#b1").show();
    $("#b2").hide();
else {
    $("#b1").hide();
    $("#b2").show();
}

//etc...

This seems cumbersome and mind-numbing. Is there a better way to encapsulate the notion that these elements are paired and should show/hide opposite each other? I’ve looked at toggle, but that isn’t right.

Answer 1

Here’s what I ended up doing:

I organized the HTML to have the pair of elements paired under a new parent for naming purposes:

<p id="first_flap"><span class="flap">MsgA1</span><span class="flap">MsgA2</span></p>
<p id="second_flap"><span class="flap">MsgB1</span><span class="flap">MsgB2</span></p>

Each of the pair has class “flap” on it. Then I can write a function:

function flip_flap(sel, cond) {
    /* Find sel, then show flaps within it according to cond. */
    var flaps = jQuery(sel + ">.flap");
    var f0 = jQuery(flaps[0]);
    (cond ? f0.show() : f0.hide());
    var f1 = jQuery(flaps[1]);
    (cond ? f1.hide() : f1.show());
}

I liked the idea of using toggle(), but unfortunately, it doesn’t work for inline elements, only block level, and I needed to use spans.

Then I can replace my original Javascript with:

flip_flap("#first_flap", conditionA);
flip_flap("#second_flap", conditionB);

Much more concise! Thanks.