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!