Make div appear and others disappear with a single click

Asked

Viewed 40 times

0

I want when I click AC it shows the content that is inside acrid, and when I click AM, show what is inside Amapa. That happens, but he plays one div under the other. I want when I click AM the content of div AC sum... and also of others Divs future that will be created with the more than twenty Brazilian states: In short: by clicking AC, only what appears inside acrid and all the others Divs remain hidden. "Amapa", "Piaui", "Bahia", etc.

$("#AC").click(function() {
  $("#acre").show();
}

);
$("#AM").click(function() {
  $("#amapa").show();
}

);
<div id="acre" style="display:none"></div>
<div id="amapa" style="display:none"></div>

<polygon id="AC" class="state" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
            34.662,120.662 27.527,118.949 16.253,117.808 9.973,116.096 2.199,113.858 0.134,114.5 0,116.356 1.532,117.948 2.131,120.037
            6.224,124.611 8.221,126.103 8.521,128.191 9.22,129.882 7.523,133.064 8.521,134.258 13.413,133.761 14.313,135.054
            17.707,138.932 21.701,138.833 25.695,137.042 26.294,134.457 27.792,133.263 29.688,130.479 30.887,130.479 29.789,134.357
            31.187,135.749 31.985,142.015 33.882,144.203 38.176,141.816 41.87,142.412 45.964,142.313 50.357,146.192 52.354,146.391
            54.151,142.114 56.848,140.225 63.837,140.026 70.312,136.403 51.502,129.225" />

<polygon id="AM" class="state" stroke="#FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
            159.534,63.864 156.251,66.717 155.966,64.435 152.255,61.866 144.834,61.009 143.408,59.154 142.123,55.016 139.269,53.018
            137.699,48.023 137.771,43.884 128.28,44.027 126.71,48.451 123.428,49.878 123.999,53.446 119.146,54.017 116.721,50.734
            113.01,54.445 112.725,58.869 105.874,53.018 107.017,50.877 104.447,44.455 104.162,37.748 101.308,34.037 99.596,29.613
            95.782,28.182 93.558,27.979 92.359,29.04 89.831,29.901 89.763,32.354 87.301,34.808 86.17,33.349 83.706,35.47 77.715,36.929
            75.785,39.78 73.521,39.382 71.991,39.515 70.859,40.178 68.862,39.581 65.134,36.2 63.337,37.692 62.139,36.797 62.339,32.719
            60.242,29.437 58.046,29.337 57.247,32.321 55.15,32.918 53.153,29.239 51.556,29.337 51.056,31.426 39.874,31.625 38.575,34.211
            39.874,36.896 43.668,37.095 44.566,39.482 43.668,42.267 39.973,40.775 37.477,42.764 37.078,50.023 40.372,53.206
            40.172,56.289 43.168,58.676 38.376,87.118 34.382,85.825 28.59,85.229 27.592,87.218 20.702,88.212 12.082,92.729 10.618,94.851
            9.52,99.251 7.789,102.235 8.388,103.826 7.723,105.484 3.528,107.937 2.197,111.915 2.199,113.858 9.973,116.096 16.253,117.808
            27.527,118.949 34.662,120.662 51.502,129.225 70.312,136.403 79.532,137.421 81.757,134.363 83.469,134.363 85.039,132.792
            84.753,128.797 87.894,126.942 90.605,126.514 91.604,124.944 91.604,122.232 93.744,119.521 96.599,117.666 101.308,117.666
            103.734,121.661 108.158,124.087 112.012,124.087 114.58,126.371 140.649,125.419 141.314,123.136 142.647,121.042
            141.885,117.998 142.409,116.381 142.551,113.527 141.694,113.099 141.267,111.529 141.125,109.959 139.126,106.677
            139.839,104.393 142.123,103.537 154.967,76.565 157.108,70.571 159.676,67.574 161.817,63.864" />

jquery

2 answers

2


I suggest you add a class to Divs, hide everything in click and display only the specific:

<div id="acre" class="estado" style="display:none"></div>
<div id="amapa" class="estado" style="display:none"></div>

...

$("#AC").click(function() {
  $(".estado").hide();
  $("#acre").show();
});
$("#AM").click(function() {
  $(".estado").hide();
  $("#amapa").show();
});

1

To avoid replicate function, use the following generic function:

<div id="acre" class="estado" style="display:none">AC</div>
<div id="amapa" class="estado" style="display:none">AM</div>

<script>
$(".estado").click(function() {
   $(".estado").hide();
   $(this).show();
});
</script>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.