I am trying to create a page with the map of europe on the left and on the right a panel that appears when I click on the desired country.My problem at the moment is the panel, because I am in trouble creating it.This is the code of the page without the panel:\[code\]<script type="text/javascript">$(function(){$('#navigation li a').append('')$('#navigation li a').append('')$('#navigation .hover').css("filter","alpha(opacity=00)");$('#navigation li a').hover(function() {// Stuff that happens when you hover on + the stop()$('.hover', this).stop().animate({ 'opacity': 1}, 700,'easeOutSine')},function() {// Stuff that happens when you unhover + the stop()$('.hover', this).stop().animate({ 'opacity': 0}, 700, 'easeOutQuad')})});$(function($){ $('#map').cssMap({'size' : 670});});</script><body><div id="wrap"> <div id="page"> <div id="map-content"> <div id="map"> <ul class="europe"> <li class="es"><a href="http://stackoverflow.com/questions/12795823/#espana" id=show>Espana</a></li> <li class="uk"><a href="http://stackoverflow.com/questions/12795823/#unitedkingdom">United Kingdom</a></li> <li class="fr"><a href="http://stackoverflow.com/questions/12795823/#france">France</a></li> </ul> </div> </div> <button id=hide>hide()</button> <button id=reset>Reset</button> <p>Hello, this show() and hide() example</p> <script type="text/javascript"> $("ul.europe li a show").click(function () { $("p").show('fast'); }); $("#hide").click(function () { $("p").hide(1000); }); $("#reset").click(function(){ location.reload(); }); </script> </div> </div> \[/code\]In this part of the code the first function is for a menu, the second one call a JS for the map.I thought to use .show(), but I really do not know how to manage them. If I click on Espana nothing happen. I think that the problem is in the '$("ul.europe li a show")'.Or use also something like this: http://jsfiddle.net/rionmonster/J8U25/Any help please?