jQuery Event logic/order of operations

I'm missing a final 1% of a foote开发者_开发技巧r element I'm working on.

The logic of what I want to do should be obvious: I want to have the word EXPAND showing when I hover over the footer, and I want the word HIDE showing when the footer is expanded.

I have everything working except the HIDE part when the footer is expanded—when I hover away from the footer block, it shows the word EXPAND again. I want to stop that hover event from occurring. Or at least I think that's what I want to do.

=>JSFiddle will show you what I'm talking about.

Appreciate the help,

Terry

$(document).ready(function() {
  $("#shows").click(function () {
      $('footer').toggleClass("highlight");
      $('#shows').text('Hide');
    });
    $("footer").hover(
      function () {
        $('#shows').text('+Expand');
      }, 
      function () {
        $('#shows').text('Shows');
      }
    );    
});

---

I think what you want to do is change the hover text of #shows based on whether or not footer has the class "highlight". I changed your hover handler to:

$("footer").hover(
    function () {
        $('#shows').text($('footer').hasClass("highlight") ? "Hide" : "+Expand");
    },
    function () {
        $('#shows').text('Shows');
    }
);

Modified Fiddle

---

What you're looking for is strategically calling unbind. This works in your fiddle:

function setNotExpanded(elem) {
    $(elem).unbind('mouseenter mouseleave').hover(
      function () {
        $('#shows').text('+Expand');
      }, 
      function () {
        $('#shows').text('Shows');
      }
    );
}

function setExpanded(elem) {
    $(elem).unbind('mouseenter mouseleave');   
}

$(document).ready(function() {

  $("#shows").click(function () {
      if ($('footer').hasClass('highlight')) {
        $('#shows').text('Shows');
        setNotExpanded('footer');  
      } else {                
          $('#shows').text('Hide');
          setExpanded('footer');
      }
      $('footer').toggleClass("highlight");
    });            

  setNotExpanded('footer');

});