Question

I have a portfolio page which you can select a project and it will show more detail.

I have a fiddle: http://jsfiddle.net/TxKqx/

What I want to do is if a user has already selected a project to view, if they select another for the other one to deselect and fade the detail out.

I have the following code to open and select the projects:

$('.widget-item-expand').click(function() {
        $(this).parent().toggleClass("selected");
        var currentId = $(this).parent().attr('id');
        var currentIdfull = "#"+currentId+"-full";
        $('#port-full-item').css("height","320px");
        $('#port-full-item').slideDown('slow');
        $(currentIdfull).css("height","320px");
        $(currentIdfull).fadeToggle('slow');
});
​

I have tried this method to solve it but it doesn’t work: (not this exact code)

if ($('#elm').is('.selected')) {
//#elm has the class
} else {
//#elm doesn't have the class
}

Any help would be appriciated.

Answer 1

I hope I have understood well what you want.

See http://jsfiddle.net/TxKqx/2/

$('.widget-item-expand').click(function() {
    $(this).parent().siblings('.selected').removeClass('selected');
    $(this).parent().toggleClass("selected");
    $('#port-full-item')
        .addClass('selected')
        .css("height","320px")
        .slideDown('slow');
    var currentId = $(this).parent().attr('id'),
        $prevFull=$(".widget-full.selected");
    if(currentId+'-full'!==$prevFull.attr('id')){
        $prevFull
            .hide()
            .removeClass('selected');
    }
    $("#"+currentId+"-full")
        .addClass('selected')
        .css("height","320px")
        .fadeToggle('slow');
});