hide and show element(toggle) only for some time and then fade away

I need to hide a div with a link inside the div. At first, it is still visible and undo link allows to undo that action. If no undo action is taken in the range of 1.5-3 seconds the tile fades away. This is what I have tried: http://jsfiddle.net/2jexgo3m/7/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>

<style>
.metricsTile {
    width:275px;
    height:275px;
    border:1px solid #000;
}
.heading {
    width:275px;
    height:30px;
    border-bottom:1px solid #000;
}
.title {
    width:230px;
    float:left;
     border:1px solid #000;
}
.hideTile {
    width:25px;
    float:left;
    padding-left:5px;
    border:1px solid #000;
}
.content {
    width:275px;
}
.hideTile {
    font-size:13px;
}
.hidden {
    display:none;
}
.undoHide {
    display:none;
}
</style>
<script>
    $(function() {
        var hide = $('.undoHide').data('hidden'); 
            $("div.hideTile").click(function () {
            $(this).closest('.metricsTile').find('.content').hide();
            if ($('.undoHide').css('display') == 'none') {
                $(".undoHide").css("display","block");
                hide = $('.undoHide').data('hidden',true); 
            }        
            $(".title").html("Hidden");
            $(".undoHide").click(function () {
                $('.content').show();
                $(".undoHide").css("display","none");
                $('.title').html('BUSINESS');
                hide = $('.undoHide').data('hidden',false);  
           });

          if( $('.undoHide').attr("data-hidden") == 'true' )  {
           setTimeout(function() {   //calls click event after a certain time
           $('.metricsTile').fadeOut().remove();
           }, 3000);  
        }  
        });
    });
</script>
</head>
<body id="index" class="home">
<div class="metricsTile">
    <div class="heading">
        <div class="title">TITLE</div>
        <div class="hideTile">hide</div>       
   </div>
    <div class="content">
        <p>Description and Images</p>
    </div>
    <div class="undoHide" data-hidden="">Undo</div>
</div>
</body>
</html>

The fading away part is not working.

This question on SO looks similar but is not helping in my case. Make hidden div appear then fade away?

Any help to make me understand where I am making the mistake is appreciated.

Solution

Try it with clearTimeout(), also you had some understanding problems.

This Part here would never be true:

if( $('.undoHide').attr("data-hidden") == 'true' )  {
       setTimeout(function() {   //calls click event after a certain time /> Hmm, no click event in here...
       $('.metricsTile').fadeOut().remove();
       }, 3000);  
    }

It is called on page load once, so you have to check it on click:

$(function () {
    var timeout;
    $("div.hideTile").click(function () {
        $(this).closest('.metricsTile').find('.content').hide();
        $('.undoHide').show();
        $(".title").html("Hidden");
        timeout = setTimeout(function () { //calls fadeout after a time
            $('.metricsTile').fadeOut(function(){
                $(this).remove();
            });
        }, 3000);

    });

    $(".undoHide").click(function () {
        clearTimeout(timeout);
        $('.content').show();
        $(".undoHide").hide();
        $('.title').html('BUSINESS');
    });
});

here the fiddle http://jsfiddle.net/jvhjqcfu/ hope it helps