Estou fazendo um mapa do brasil como svg, preciso que quando eu clicar em um determinado estado ele da um show em uma div diferente que vai ter as informações sobre aquele estado.
Preciso compara a id do path com a class da div e exibir o .show
Segue o código que como estou fazendo e a onde eu parei com a duvida.
<div id="mapa">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="590" viewBox="0 0 432 428">
<path id="acre" data-name="Acre"
d="M 40.00,152.22
C 40.00 ..." />
</svg>
</div>
<div id=acre>
<p>teste</p>
</div>
O codigo em js que tenho acha o path que cliquei e da um alerta mostrando o nome como esta abaixo, mais eu quero que em vez que dar esse alerta ele da um .show em uma div que ja vai estar .hide.
$("#mapa path").click(function(){ alert('Voce clicou no estado do '+$(this).attr('data-name')); });
data-name
?id do path para data-id
e utilizar:$('#'+ $(this).attr('data-id')).show()
ou varid = $(this).attr('data-id'); $('#'+id).show()
para mostrar a div específica do estado.