Question

I’m probably doing something stupid, but I can’t think today for some reason.

I have three divs, they all have a class of “staff_member”. When you click on a div, its width should expand and the other two divs shrink. If you click on a different div, this div should now expand and the other divs shrink. This all works fine. However, I want a call back function so if you click on the expanded div again it should return ALL three divs to the normal size (shrinking the previously expanded div and growing the shrunken divs.)

If I add a call back it does nothing, and if I try and run it as a separate function the expanded div shrinks and then expands again.

Heres my code:

jQuery(document).ready(function() {

    var regionWidth = jQuery(".region-panels").width();
    jQuery(".staff_wrapper").css("width",regionWidth*0.84);

    var halfRegion = regionWidth/2;
    var howMany = jQuery(".staff_member").length;
    var makeMeThin = halfRegion/howMany;

    jQuery(".staff_member").css("width",makeMeThin);
    jQuery(".staff_member img").css("cursor", "pointer");

    jQuery(".staff_member").click(function () {
        jQuery(".expanded").removeClass("expanded");
        jQuery(this).addClass("expanded");
        jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){
            jQuery(".expanded").stop().animate({"width":"84%"});
        });
    }, function(){
        jQuery(".staff_member").animate({"width":makeMeThin});
    });

});

Answer 1

To make a click on an expanded section, do something different, you just need to check in the click handler whether the clicked on item is already expanded or not:

jQuery(".staff_member").click(function () {
    if (jQuery(this).hasClass("expanded")) {
        // clicked item already expanded, set all back to normal width
        jQuery(".expanded").removeClass("expanded");
        jQuery(".staff_member").animate({"width": "50%"});   // you add right code for setting to normal width
    } else {
        // clicked on item was not already expanded
        jQuery(".expanded").removeClass("expanded");
        jQuery(this).addClass("expanded");
        jQuery(".staff_member").not(this).animate({"width":"5%"}, function(){
            jQuery(".expanded").stop().animate({"width":"84%"});
        });
    }
});

You don’t show in your code what the normal width is so I’ll leave that for you to fill in.