jquery toggle close other opened divs

Question

I have an issue with using toggle where i need to close other divs that are already opened, so only the div you click on is open at one time, but still toggles.

<script type="text/javascript">
    $(function () {
        $(".flyout").hide();
        $(".flyout").siblings("span").click(function () {
            $(this).siblings(".flyout").toggle(500);
        });
    });
</script>  

<ul>
<li ><span id="europe"></span>Europe
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>

<li ><span id="europe"></span>Asia
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

Any ideas on what I can add in to get the click function to close every other div class="flyout" except the one its on?

have a look at http://www.footballadvisor.net/map/ to see the issue

thanks

Answer 1

Check this, please:

http://jsfiddle.net/MbTRD/1/

$(function () {
    $(".flyout").hide();
    $(".flyout").siblings("span").click(function () {
        $(this).siblings(".flyout").toggle(500);
    });
});

​

Answer 2

The name of the country should be inside the span if you want to catch the click event. The following close everything except the element you clicked :

 <script type="text/javascript">
     $(function () {
         $(".flyout").hide();
         $(".flyout").siblings("span").click(function () {
             $(".flyout").hide();
             $(this).siblings(".flyout").toggle(500);
         });
     });
</script>  

<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>

<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>

Answer 3

检查此http://jsfiddle.net/MbTRD/5/我希望这会对您有所帮助

Answer 4

Here an improvement to your jQuery: Fiddle

    $(function () {
        $(".flyout").siblings("span").click(function () {
            $(".flyout").slideUp(200, function() {
                $(this).siblings(".flyout").toggle(500);
            });
            $(this).siblings(".flyout").toggle(500);
        });
    });