Question

It’s a while i’m trying to find something what i need and checked lots of links @stackoverflow, @google & etc. but each time some thing isn’t working 100%

So problem is about making show/hide DIV’s where only one will be opened at once + could be closed on pressing same link, active DIV link should change it’s style.

One of most knows is: http://dimdajdeneg.com/temp/menu.html
but it’s not changing “show DIV” link style & you can’t close all DIV’s, like if first is open, clicking it again won’t close opened one.

This one is also interesting: http://dimdajdeneg.com/temp/menu2.html
it even closes it self, but “show DIV” link style isn’t changeable

I know that’s simple, but probably it’s just coz of monday 🙂
Anyone can help me?

Thank you in advance!

Answer 1

Here is what i came up with, it fades out everything except the clicked one (inside .not()), which gets toggled instead.

HTML:

<a href="" data-id="d1">Link 1</a>
<a href="" data-id="d2">Link 1</a>
<a href="" data-id="d3">Link 1</a>
<div id="d1">Div 1</div>
<div id="d2">Div 2</div>
<div id="d3">Div 3</div>

CSS:

a {
    background:blue;
    color:red;
}
.active {
    background:green;
    color:white;
}
div{
    display:none;
}

jQuery:

$('a').click(function(ev){
    ev.preventDefault();
    var id = $(this).data('id');
    $('a').not($(this).toggleClass('active')).removeClass('active');

    // parallel fading:      
    $('div').not($('#'+id).fadeToggle(500)).fadeOut(500);
    // OR
    // sequential fading:
    $.when($('div').not($('#'+id)).fadeOut(500)).done(function(){
        $('#'+id).fadeToggle(500)
    });
});

jsFiddle:

http://jsfiddle.net/fKGc5/