Question

I have a hover effect applied to a div. All it does is basically increase the height mouseenter, decrease the height mouseleave.

As a separate function, I have a click effect applied to one of the divs:

$(function(){
    $( '#div1 a' ).click(function() {
        $( '.theRestofTheDivs' ).each(function() {
            $(this).animate({height: "30px"}, 200);
        })  
    });
});

It works great, except when I mouseleave, it collapses. Obviously that is because I have the previous hover effect.

After it’s been clicked, I don’t want to allow it to be able to collapse until another div with an anchor is clicked. Any ideas?

EDIT

The code provided is simplified, to see it in the full context go to http://www.raceramps.com/v2

Mouseover “Browse All”, then click it. I don’t want it to collapse.

Answer 1

You can put a class on the one clicked and only collapse divs if the class doesnt exist

When another div is clicked you remove the class from the previous div and add it to the one clicked

$(function(){
    $( '#div1 a' ).click(function() {
        $(".KeepOpen").removeClass(".KeepOpen");
        $(this).addClass("KeepOpen");  
        $( '.theRestofTheDivs' ).each(function() {
            $(this).animate({height: "30px"}, 200);
        })  
    });
});

And on your collapsing part add this

if ( !$(this).hasClass("KeepOpen") )
    // Collapse