CODEWITHSUNDEEP
jquerytogglejquery-animate
Dizzi
Dizzi

Reputation: 747

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 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.

Upvotes: 0

Views: 12619

Answers (5)

LoneWOLFs
LoneWOLFs

Reputation: 2306

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

Upvotes: 1

kleinohad
kleinohad

Reputation: 5912

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

Upvotes: 1

odeits
odeits

Reputation: 185

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

Upvotes: 0

Jose Faeti
Jose Faeti

Reputation: 12294

$('#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.

Upvotes: 0

Kokos
Kokos

Reputation: 9121

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

});

Upvotes: 2

Related Questions