mouse-over text with div and expandable component

by jdcast

HTML

<div class="messagepop pop" id="message"> 
    <div class="parent">
        Hover over for content
        <div class="hover-content">
           Only show this when hovering parent    
           SHORT_DESCRIPTION<br />
           <a id="descriptionButton" href="#" >...</a>
 
           <div style="display: none;" id="moreInfo">
               LONG_DESCRIPTION  
           </div>
       </div>
    </div>   
</div>

<a href="/contact" id="contact">Hover over for content</a>

<div id="helloWorld">
    <a href="#">Hello World</a>
</div>

CSS

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

.messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

.hover-content {
    display:none;
}

.parent:hover .hover-content {
    display:block;
}

#helloWorld {
    padding-top: 290px;   
}

JavaScript

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

var mouseOverContent = 0;

$(function() {
    
  $('#contact').on('mouseenter', function() {
    mouseOverContent = 1;
    setTimeout(function() {
        if (mouseOverContent == 1) {
            $(this).addClass('selected');
            $('.pop').slideFadeToggle();
        } else {
            //do nothing
        }
    }, 500);
      
    /*$(this).addClass('selected');
    $('.pop').slideFadeToggle();*/
    return false;
  });

  $('#contact').mouseleave(function() {
    //alert('hello world');
    mouseOverContent = 0;
    return false;
  });
    
  $('#message').mouseleave(function() {
    //alert('hello world');
    deselect($('#contact'));
    $('#moreInfo').css('display','none');
    return false;
  });
    
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};


var toggleContent = 0;

function toggle() {
    if (toggleContent == 0) {
        //alert('show content');
        //$('#moreInfo').style.display = 'block';
        $('#moreInfo').css('display','block');
        toggleContent = 1;
    } else {
        //$('#moreInfo').style.display = 'none';
        $('#moreInfo').css('display','none');
        toggleContent = 0;   
    }
}

$('#descriptionButton').click(function() {
    //alert('Hello world again!!!');
    toggle();
    //alert('Bye World');       
});