All containers coming out at the same time

I'm creating a world map and there are flags in several countries. What I need to do is so that when someone hovers over a flag a DIV with content corresponding to that country slides down and then gets closed by clicking on a close button.

This is my basic HTML:

<map name="imgworldmap" id="imgworldmap">
 <area shape="poly" coords="446,125,445,126" alt="">
 <area shape="poly" coords="447,123,446,445" alt="">
 etc....
</map>

<ul class="flag开发者_JAVA技巧s-container">
 <li class="us">
  <div class="flyout">Country A</div>
 </li>
 <li class="ht">
  <div class="flyout">Country B</div>
 </li>
 <li class="uk">
  <div class="flyout">Country C</div>
 </li>
</ul>

This is my jQuery attempt (of course it doesn't work, it brings ALL flyouts out):

$(function(){
 $('area').hover(function(){
  $('.flyout').toggle();    
 });
});

Closing the flyout DIV, I know how to do that, so I don't need help with that part.

What I need help with is to have an area's corresponding DIV slide down.

Any help would be greatly appreciated.

Thanks!

**EDIT

Another more robust and scalable solution**

In the following link you'll find a solution that offers more functionalities and with better usability:

.mouseleave() with .delay() working together

---

I would attach a data- attribute to each area who's content is the ID of the <li> element containing the correct flyout. That will let you target the correct elements.

Here's an example:

<map name="imgworldmap" id="imgworldmap">
 <area shape="poly" coords="446,125,445,126" alt="" data-code="us">
 <area shape="poly" coords="447,123,446,445" alt="" data-code="ht">
 etc....
</map>

<ul class="flags-container">
 <li id="us">
  <div class="flyout">Country A</div>
 </li>
 <li id="ht">
  <div class="flyout">Country B</div>
 </li>
 <li id="uk">
  <div class="flyout">Country C</div>
 </li>
</ul>

And the javascript:

$(function(){
 $('area').hover(function(){
  // Get the data from the hovered element
  var id = $(this).attr("data-code");

  // Toggle the correct div
  $('#'+id+' div').toggle();    
 });
});