How to cancel jquery div effect if clicked.

Question

Hello,

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

Answer 2

Assuming your basic markup looks something like this:

<div id="div1" class="myClass"><a href="#">Div1</a></div>
<div id="div2" class="myClass"><a href="#">Div2</a></div>
<div id="div3" class="myClass"><a href="#">Div3</a></div>

You could do this:

// Mouseover event
$(".myClass a").live("mouseover", function () {
    // If it already has the "selected" class applied to it, do nothing
    if ( $(this).is(".selected") ) {
        return;
    }
    else {
        // Do your hover effect
        $(this).animate({height: "30px"}, 200);
    }
});

// Mouseout event
$(".myClass a").live ("mouseout", function () {
    // If it already has the "selected" class applied to it, do nothing
    if ( $(this).is(".selected") {
        return;
    }
    else {
        // Do your mouseout effect (return to default state or whatever else)
        $(this).animate({height: "20px"}, 200);
    }

});
// Click Event
$(".myClass a").live("click", function () {
    // If it already has the "selected" class applied to it, do nothing
    if ( $(this).is(".selected") ) {
        return;
    }
    else {
        // Remove the selected class from any element that already has it
        $(".selected").removeClass(".selected");
        $(this).addClass("selected");
    }
});

Something like this, or modeled like this should work.