Multiple animated jQuery buttons

Question

I've been working on this day and night and, since I'm a newbie, I can't seem to figure this out. I have a map with 27 states. Each, on click, show the highlighted state and an info box. Also, I have 27 links that, on click, do the same as the above. So, I wrote a huge code and got it to work fine, but I'd like to resume that code by creating a loop or something like it.

Here's the code that works:

var div = [ac, al, am, ap, ba, ce, dsf, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
var div1 = [ac1, al1, am1, ap1, ba1, ce1, dsf1, es1, go1, ma1, mg1, ms1, mt1, pa1, pb1, pe1, pi1, pr1, rj1, rn1, ro1, rr1, rs1, sc1, se1, sp1, to1];
var botao = [aclegenda, allegenda, amlegenda, aplegenda, balegenda, celegenda, dflegenda, eslegenda, golegenda, malegenda, mglegenda, mslegenda, mtlegenda, palegenda, pblegenda, pelegenda, pilegenda, prlegenda, rjlegenda, rnlegenda, rolegenda, rrlegenda, rslegenda, sclegenda, selegenda, splegenda, tolegenda];
var botao1 = [ac, al, am, ap, ba, ce, df, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
function esconder() {
$(div).slideUp( "slow" );
$(div1).hide();
}

$(function () {
esconder();
$('#aclegenda , #acre').click(function() {
    if ($(ac, ac1).is(":visible")) {
        $(ac).slideUp( "slow" );
        $(ac1).hide();
    }else{
        esconder();
        $(ac).slideDown( "slow" );
        $(ac1).show();
    }
});

$('#allegenda , #alagoas').click(function() {
    if ($(al, al1).is(":visible")) {
        $(al).slideUp( "slow" );
        $(al1).hide();
    }else{
        esconder();
        $(al).slideDown( "slow" );
        $(al1).show();
    }
});

$('#amlegenda , #amazonas').click(function() {
    if ($(am, am1).is(":visible")) {
        $(am).slideUp( "slow" );
        $(am1).hide();
    }else{
        esconder();
        $(am).slideDown( "slow" );
        $(am1).show();
    }
});

$('#aplegenda , #amapa').click(function() {
    if ($(ap, ap1).is(":visible")) {
        $(ap).slideUp( "slow" );
        $(ap1).hide();
    }else{
        esconder();
        $(ap).slideDown( "slow" );
        $(ap1).show();
    }
});

$('#balegenda , #bahia').click(function() {
    if ($(ba, ba1).is(":visible")) {
        $(ba).slideUp( "slow" );
        $(ba1).hide();
    }else{
        esconder();
        $(ba).slideDown( "slow" );
        $(ba1).show();
    }
});

$('#celegenda , #ceara').click(function() {
    if ($(ce, ce1).is(":visible")) {
        $(ce).slideUp( "slow" );
        $(ce1).hide();
    }else{
        esconder();
        $(ce).slideDown( "slow" );
        $(ce1).show();
    }
});
/* DF */
$('#dflegenda , #df').click(function() {
    if ($(dsf, dsf1).is(":visible")) {
        $(dsf).slideUp( "slow" );
        $(dsf1).hide();
    }else{
        esconder();
        $(dsf).slideDown( "slow" );
        $(dsf1).show();
    }
});

$('#eslegenda , #espiritosanto').click(function() {
    if ($(es, es1).is(":visible")) {
        $(es).slideUp( "slow" );
        $(es1).hide();
    }else{
        esconder();
        $(es).slideDown( "slow" );
        $(es1).show();
    }
});

$('#golegenda , #goias').click(function() {
    if ($(go, go1).is(":visible")) {
        $(go).slideUp( "slow" );
        $(go1).hide();
    }else{
        esconder();
        $(go).slideDown( "slow" );
        $(go1).show();
    }
});

$('#malegenda , #maranhao').click(function() {
    if ($(ma, ma1).is(":visible")) {
        $(ma).slideUp( "slow" );
        $(ma1).hide();
    }else{
        esconder();
        $(ma).slideDown( "slow" );
        $(ma1).show();
    }
});

$('#mglegenda , #minasgerais').click(function() {
    if ($(mg, mg1).is(":visible")) {
        $(mg).slideUp( "slow" );
        $(mg1).hide();
    }else{
        esconder();
        $(mg).slideDown( "slow" );
        $(mg1).show();
    }
});

$('#mslegenda , #matogrossosul').click(function() {
    if ($(ms, ms1).is(":visible")) {
        $(ms).slideUp( "slow" );
        $(ms1).hide();
    }else{
        esconder();
        $(ms).slideDown( "slow" );
        $(ms1).show();
    }
});

$('#mtlegenda , #matogrosso').click(function() {
    if ($(mt, mt1).is(":visible")) {
        $(mt).slideUp( "slow" );
        $(mt1).hide();
    }else{
        esconder();
        $(mt).slideDown( "slow" );
        $(mt1).show();
    }
});

$('#palegenda , #para').click(function() {
    if ($(pa, pa1).is(":visible")) {
        $(pa).slideUp( "slow" );
        $(pa1).hide();
    }else{
        esconder();
        $(pa).slideDown( "slow" );
        $(pa1).show();
    }
});

$('#pblegenda , #paraiba').click(function() {
    if ($(pb, pb1).is(":visible")) {
        $(pb).slideUp( "slow" );
        $(pb1).hide();
    }else{
        esconder();
        $(pb).slideDown( "slow" );
        $(pb1).show();
    }
});

$('#pelegenda , #pernambuco').click(function() {
    if ($(pe, pe1).is(":visible")) {
        $(pe).slideUp( "slow" );
        $(pe1).hide();
    }else{
        esconder();
        $(pe).slideDown( "slow" );
        $(pe1).show();
    }
});

$('#pilegenda , #piaui').click(function() {
    if ($(pi, pi1).is(":visible")) {
        $(pi).slideUp( "slow" );
        $(pi1).hide();
    }else{
        esconder();
        $(pi).slideDown( "slow" );
        $(pi1).show();
    }
});

$('#prlegenda , #parana').click(function() {
    if ($(pr, pr1).is(":visible")) {
        $(pr).slideUp( "slow" );
        $(pr1).hide();
    }else{
        esconder();
        $(pr).slideDown( "slow" );
        $(pr1).show();
    }
});

$('#rjlegenda , #riodejaneiro').click(function() {
    if ($(rj, rj1).is(":visible")) {
        $(rj).slideUp( "slow" );
        $(rj1).hide();
    }else{
        esconder();
        $(rj).slideDown( "slow" );
        $(rj1).show();
    }
});

$('#rnlegenda , #riograndenorte').click(function() {
    if ($(rn, rn1).is(":visible")) {
        $(rn).slideUp( "slow" );
        $(rn1).hide();
    }else{
        esconder();
        $(rn).slideDown( "slow" );
        $(rn1).show();
    }
});

$('#rolegenda , #rondonia').click(function() {
    if ($(ro, ro1).is(":visible")) {
        $(ro).slideUp( "slow" );
        $(ro1).hide();
    }else{
        esconder();
        $(ro).slideDown( "slow" );
        $(ro1).show();
    }
});

$('#rrlegenda , #roraima').click(function() {
    if ($(rr, rr1).is(":visible")) {
        $(rr).slideUp( "slow" );
        $(rr1).hide();
    }else{
        esconder();
        $(rr).slideDown( "slow" );
        $(rr1).show();
    }
});

$('#rslegenda , #riograndesul').click(function() {
    if ($(rs, rs1).is(":visible")) {
        $(rs).slideUp( "slow" );
        $(rs1).hide();
    }else{
        esconder();
        $(rs).slideDown( "slow" );
        $(rs1).show();
    }
});

$('#sclegenda , #santacatarina').click(function() {
    if ($(sc, sc1).is(":visible")) {
        $(sc).slideUp( "slow" );
        $(sc1).hide();
    }else{
        esconder();
        $(sc).slideDown( "slow" );
        $(sc1).show();
    }
});

$('#selegenda , #sergipe').click(function() {
    if ($(se, se1).is(":visible")) {
        $(se).slideUp( "slow" );
        $(se1).hide();
    }else{
        esconder();
        $(se).slideDown( "slow" );
        $(se1).show();
    }
});

$('#splegenda , #saopaulo').click(function() {
    if ($(sp, sp1).is(":visible")) {
        $(sp).slideUp( "slow" );
        $(sp1).hide();
    }else{
        esconder();
        $(sp).slideDown( "slow" );
        $(sp1).show();
    }
});

$('#tolegenda , #tocantins').click(function() {
    if ($(to, to1).is(":visible")) {
        $(to).slideUp( "slow" );
        $(to1).hide();
    }else{
        esconder();
        $(to).slideDown( "slow" );
        $(to1).show();
    }
});
});

For example's sake, this is the code that doesn't work, which I have been trying to work on:

var div = [ac, al, am, ap, ba, ce, dsf, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
var div1 = [ac1, al1, am1, ap1, ba1, ce1, dsf1, es1, go1, ma1, mg1, ms1, mt1, pa1, pb1, pe1, pi1, pr1, rj1, rn1, ro1, rr1, rs1, sc1, se1, sp1, to1];
var botao = [aclegenda, allegenda, amlegenda, aplegenda, balegenda, celegenda, dflegenda, eslegenda, golegenda, malegenda, mglegenda, mslegenda, mtlegenda, palegenda, pblegenda, pelegenda, pilegenda, prlegenda, rjlegenda, rnlegenda, rolegenda, rrlegenda, rslegenda, sclegenda, selegenda, splegenda, tolegenda];
var botao1 = [ac, al, am, ap, ba, ce, df, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];

function esconder() {
$(div).slideUp( "slow" );
$(div1).hide();
}

$(function () {
esconder();
function contar() {
for (i=0; i<27; i++) {
    var d = div[i];
    var d1 = div1[i];
    var b = botao[i];
    var b1 = botao1[i];


$('#b , #b1').click(function() {
    if ($(d, d1).is(":visible")) {
        $(d).slideUp( "slow" );
        $(d1).hide();
    }else{
        esconder();
        $(d).slideDown( "slow" );
        $(d1).show();
    }
});
}
}
});

Can you please try to help me? I already got it to work, but I'd like to minimize my script!

Fiddle of the huge working code

Answer 1

You can bind a single click to many elements using a class selector, etc. this refers to the element that ended up being the target/srcElement for the event.

$('.toggleable').click(function() {
   if($(this).is(':visible')) {
       $(this).slideUp('slow');
       $(this).find('.innerDiv').hide();
   } else {
       $(this).slideDown('slow');
       $(this).find('.innerDiv').show();
   }
});

Under the covers, each matching element will get its own closure, and therefore operate correctly. I'm assuming in this code that one div is contained within the other (there's no HTML here). It's pretty trivial to use other methods, such as finding siblings, etc.

In an absolutely worst-case scenario, you can use data attributes on the clickable element to target other named elements, or you could make a named map:

var assoc = {
    ac: ac1, al: al1, /* and so on */ };
$('#ac, #al').click(function() {
   if($(this).is(':visible')) {
       $(this).slideUp('slow');
       $(assoc[this.id]).hide();
   } else {
       $(this).slideDown('slow');
       $(assoc[this.id]).show();
   }
});

I'd rather prefer the first method, as you can then add/remove elements in your HTML without having to refactor code.

There's plenty of other ways you could do this dynamically, including using $.on to bind to a parent element and then determine which element was clicked.

// uses assoc from prior example
$('#parent').on('click','.toggleable', function() {
    var id = $(this).attr('id'), v1 = $(this), v2 = assoc[id];
    if(v1.is(':visible')) {
        v1.slideUp('slow');
        v2.hide();
    } else {
        v1.slideDown('slow');
        v2.show();
    }
});

This final version allows new .toggleable elements to be added to #parent on the fly, and they will also react correctly (assuming they are styled, loaded into assoc, etc).

---

This final version, http://jsfiddle.net/dx9omcwd/11/, works the same as the original code, using just 35 lines of code. Included here is the JS code.

var info = {};
var div = [ac, al, am, ap, ba, ce, dsf, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
var div1 = [ac1, al1, am1, ap1, ba1, ce1, dsf1, es1, go1, ma1, mg1, ms1, mt1, pa1, pb1, pe1, pi1, pr1, rj1, rn1, ro1, rr1, rs1, sc1, se1, sp1, to1];
function esconder() {
    $(div).slideUp("slow");
    $(div1).hide();
}

$(function () {
    var botao = ['aclegenda', 'allegenda', 'amlegenda', 'aplegenda', 'balegenda', 'celegenda', 'dflegenda', 'eslegenda', 'golegenda', 'malegenda', 'mglegenda', 'mslegenda', 'mtlegenda', 'palegenda', 'pblegenda', 'pelegenda', 'pilegenda', 'prlegenda', 'rjlegenda', 'rnlegenda', 'rolegenda', 'rrlegenda', 'rslegenda', 'sclegenda', 'selegenda', 'splegenda', 'tolegenda'];
    var botao1 = ['acre', 'alagoas', 'amazonas', 'amapa', 'bahia', 'ceara', 'df', 'espiritosanto', 'goias', 'maranhao', 'minasgerais', 'matogrossosul', 'matogrosso', 'para', 'paraiba', 'pernambuco', 'piaui', 'parana', 'riodejaneiro', 'riograndenorte', 'rondonia', 'roraima', 'riograndesul', 'santacatarina', 'sergipe', 'saopaulo', 'tocantins'];

    function prepare() {
        var index = 0;
        while (index < botao.length) {
            info[botao[index]] = info[botao1[index]] = [div[index], div1[index]];
            index = index + 1;
        }
    }
    prepare();
    esconder();
    $('.container').on('click', '.legendalinks.jsvoidcursor, .linksestados1',
                       function () {
                           var id = $(this).attr('id'),
                               curr = info[id];
                           if ($(curr[0], curr[1]).is(':visible')) {
                               $(curr[0]).slideUp('slow');
                               $(curr[1]).hide();
                           } else {
                               esconder();
                               $(curr[0]).slideDown('slow');
                               $(curr[1]).show();
                           }
                       });
});

I'm sure this could be optimized even more, but this answer was meant only to illustrate the use of on to minimize the amount of code that has to be written. In this case, using just one single function with some prepared data greatly reduces the amount of data that's necessary.

Further optimizations would be to use objects instead of just plain arrays to associate the data.