All containers coming out at the same time
<p>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.</p>

<p>This is my basic HTML:</p>

<pre><code>&lt;map name="imgworldmap" id="imgworldmap"&gt;
 &lt;area shape="poly" coords="446,125,445,126" alt=""&gt;
 &lt;area shape="poly" coords="447,123,446,445" alt=""&gt;
 etc....
&lt;/map&gt;

&lt;ul class="flags-container"&gt;
 &lt;li class="us"&gt;
  &lt;div class="flyout"&gt;Country A&lt;/div&gt;
 &lt;/li&gt;
 &lt;li class="ht"&gt;
  &lt;div class="flyout"&gt;Country B&lt;/div&gt;
 &lt;/li&gt;
 &lt;li class="uk"&gt;
  &lt;div class="flyout"&gt;Country C&lt;/div&gt;
 &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

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

<pre><code>$(function(){
 $('area').hover(function(){
  $('.flyout').toggle();    
 });
});
</code></pre>

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

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

<p>Any help would be greatly appreciated.</p>

<p>Thanks!</p>

<p>**EDIT</p>

<p>Another more robust and scalable solution**</p>

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

<p><a href="http://stackoverflow.com/questions/6255821/mouseleave-with-delay-working-together">.mouseleave() with .delay() working together</a></p>
