CODEWITHSUNDEEP
javascriptjquerytoggle
user989952
user989952

Reputation: 683

jquery toggle close other opened divs

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

Upvotes: 0

Views: 4450

Answers (4)

Kamal
Kamal

Reputation: 2180

Check this, please:

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

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

​

Upvotes: 2

Andrea Turri
Andrea Turri

Reputation: 6500

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);
        });
    });

Upvotes: 0

Kamal
Kamal

Reputation: 2180

check this http://jsfiddle.net/MbTRD/5/ i hope this will helpful for you

Upvotes: 1

Giorgio Minardi
Giorgio Minardi

Reputation: 2775

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>

Upvotes: 1

Related Questions