Question

I have the following script which works fairly well:

$(".btnMinimize").live('click', function(event) {
    event.preventDefault(); 

    $( this ).parents( ".portlet" ).find( ".portlet-sub-header" ).toggle();
    $( this ).parents( ".portlet" ).find( ".portlet-content" ).toggle();
    $( this ).parents( ".portlet" ).find( ".portlet-footer" ).toggle();
});

the .btnMinimize is within a div tag with the class .portlet-header.

When this button is clicked, how do I get it to toggle style sheet classes which would in-tern toggle the image of the button being clicked, so it should change from a minimize icon to a maximize icon.

Right now the button is assigned the class .btnMinimize, which should toggle to .btnMaximize, bearing in mind that the button state will be database generated, i.e. if the button for portlet 1 is minimize, and for portlet 2 is maximize, it should toggle appropriately.

I am not sure if this is the best way to go about doing this, so please feel free to suggest a better approach.

Answer 1

From the jQuery documentation, evaluate the condition then select if you need to show/hide the elements. Doing that assures you of the behavior of the toggle function.

if ( showOrHide == true ) {
    $('#foo').show();
} else if ( showOrHide == false ) {
    $('#foo').hide();
}

source : http://api.jquery.com/toggle/

Personnaly, I found that way of doing it more flexible.