Question

I have two divs which I need to show the opposite upon click.

You can see the site here as to what I mean: http://thomasbritton.co.uk/projects/akw/

Basically when you click 1 option it shows more details about it.

Have currently got it working with the following jQuery:

$('.consumer').live('click', function() {
    $(this).addClass('expanded');
    $(this).next().hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});

$('.trade').live('click', function() {
    $(this).addClass('expanded');
    $(this).prev().hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});

But I’m sure there must be a way of combing these 2 functions into 1, I just can’t figure out how.

Anyone able to help with this?

Thanks

Answer 1

Maybe something like this would work? Uses .siblings instead of .next/.prev to get the element(s).

$('.consumer,.trade').live('click', function() {
    $(this).addClass('expanded');
    $(this).siblings('.consumer,.trade').hide();
    $('.expanded h2').hide();
    $('.striped').hide();
    $('.expanded_content').fadeIn();
});