jQuery toggle open/close div's

I currently have a menu containing 3 links, which opens hidden div's relevent to itself and use this jquery code (see below) but would like it that if a div 开发者_Go百科is aready open when a second div is opened that its closes the original opened div ...

ie if "foobox" is open and then user clicks "foo2" to open "foobox2" "foobox" will close

$('#foo').toggle(function(){
 $('#foobox').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox').animate({marginLeft: '0'}, 1000);
});

$('#foo2').toggle(function(){
 $('#foo2box').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

$('#foo3').toggle(function(){
 $('#foobox3').animate({marginLeft: '354'}, 1000);
},
function(){
  $('#foobox3').animate({marginLeft: '0'}, 1000);
});

as usual thank you in advance.

---

When you are opening one, add a new class to it that indicates that it's the active one. And every time you open something, close the active one.

$('#foo').toggle(function(){
    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox').animate({marginLeft: '354'}, 1000).addClass('active');
    },
 function(){
    $('#foobox').animate({marginLeft: '0'}, 1000).removeClass('active');
});

Also, I would recommend changing your HTML and jQuery so you only need one event handler. For example instead of this:

<div id="foo">Link</div>
<div id="foobox">Content</div>

<div id="foo2">Link</div>
<div id="foobox2">Content</div>

You could do:

<div class="foo" data-target="1">Link</div>
<div id="foobox-1">Content</div>

<div class="foo" data-target="2">Link</div>
<div id="foobox-2">Content</div>

With the following jQuery:

$('.foo').toggle(function(){

    $('.active').animate({marginLeft: '0'}, 1000).removeClass('active');
    $('#foobox-'+$(this).data('target')).animate({marginLeft: '354'}, 1000).addClass('active');

},function(){

    $('#foobox-'+$(this).data('target')).animate({marginLeft: '0'}, 1000).removeClass('active');

});

---

Add to all the foo elements (#foo, #foo2, #foo3..) the class foo Also add to all the foobox elements (#foobox, #foobox2, #foobox3..) the class foobox and use this:

$('.foo').live('click', function () {
if (!$(this).next().is(':visible')) {
$('.foobox').hide();
$(this).next().slideToggle();
if ($(this).next().is(':visible')) {
    //DoSomething
}
}
//DoSomething }
});

---

Use classes like for example class="special" and then use jQuery to put closing or reverse animation action on that class before opening the current class so all the menus with the class will be closed and the current one will be opened.

Suppose your html is

<div id="foo" class="menu">
    <div id="foobox" class="special"></div>
</div>
<div id="foo2" class="menu">
    <div id="foo2box" class="special"></div>
</div>
<div id="foo3" class="menu">
    <div id="foobox3" class="special"></div>
</div>

And jQuery will be as follows

$('.special').live('click',function(){
    $('#foo').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox').animate({marginLeft: '0'}, 1000);
    });

    $('#foo2').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foo2box').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foo2box').animate({marginLeft: '0'}, 1000);
    });

    $('#foo3').toggle(function(){
        $('.special').animate({marginLeft: '0'}, 1000);
        $('#foobox3').animate({marginLeft: '354'}, 1000);
    },
    function(){
        $('#foobox3').animate({marginLeft: '0'}, 1000);
    });
});

Example on JSFIDDLE.net

---

$('#foobox').animate({marginLeft: '354'}, 1000).data( 'open', true );

Give a data every time you open a div, then every time you open a div also check if all the other divs have .data('open') == true, if so you it means they are open, so close them and remove that data value.

EDIT

You could also store the opened element to a variable, like:

$('#foobox').animate({marginLeft: '354'}, 1000);
$opened_element = $('#foobox');

Then when you open another box, simply close $opened_element. Probably it must be a global variable though, giving your code.

---

I believe the functionality you are talking about is covered in http://docs.jquery.com/UI/Accordion