Simple Div Popup

I wanted a simple popup. Click on a link, it opens a div. When you mouse off the div, or the link, it goes away. Pretty easy:

The jQuery

$(document).ready(function(){

    var timer;

    $('.dropdiv-link').click(function(e){
        e.preventDefault();
        var target = '#'+$(this).attr('data-target');
        
        if ($(target).is(":visible")){
            $(target).hide();
        }
        else{
            $(target).show();
        }
    });
	
    $('.dropdiv-dropwindow').mouseover(function(e){
        clearTimeout(timer);
        $(this).show();
    });

    $('.dropdiv-link').mouseout(function(e){
        timer = setTimeout(function(){$('.dropdiv-dropwindow').hide()},500);
    });

    $('.dropdiv-dropwindow').mouseout(function(e){
         $('.dropdiv-dropwindow').hide();
    });
});

The HTML

Just change the data-target to match the id of the div that you want to show or hide.

<a href="#" class="dropdiv-link" data-target="drop1">Test Link</a>
<div id="drop1" class="dropdiv-dropwindow">Test Div</div>

The CSS

.dropdiv-dropwindow{
    display: none;
    position: absolute;
}