Make entire div clickable for WordPress posts, not just the title?

Question

Currently, only the h1 gets linked to the post. I would like the entire div post-info to be clickable.

I've been working with this, but for some reason nothing changes. The entire div still isn't clickable; only the h1 .

JS

$("article.has-post-thumbnail .post-info").click(function() {
    window.location = $(this).find("a").attr("href");
    return false;
});

HTML

<article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
    <div class="post-info" style="display: none; opacity: 1;">
        <h1 class="entry-title"><a href="/" rel="bookmark">Post Title</a></h1>
        <span class="posted-on">
            <a href="/" rel="bookmark">
                <time class="entry-date published" datetime="2014-08-14T13:02:27+00:00">August 14, 2014</time>
                <time class="updated" datetime="2014-09-24T09:49:19+00:00">September 24, 2014</time>
            </a>
        </span>
    </div>
    <img width="312" height="200" src="http://i.imgur.com/9spxUQe.jpg" class="attachment-post-thumbnail wp-post-image" style="opacity: 1;"> 
</article>

CSS

article {
background: #EE7A1D;
float: left;
height: 200px;
margin: 0 2px 2px 0;
overflow: hidden;
position: relative;
width: 312px;
}

article .post-info {
display: none;
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}

article .post-info h1 {
line-height: 1.4;
font-size: 20px;
font-size: 2rem;
}

article .post-info a {
color: #FFF;
}

article .post-info span {
font-style: italic;
}

article .post-info a {
color: #FFF;
}

article > img {
width: 100%;
}

.updated:not(.published) {
display: none;
}

Edit: Here's a fiddle I created: http://jsfiddle.net/jaL5bd3z/1/

Answer 1

The issue is that you are applying the click action to a div that only wraps the h1 . You have two options to fix it:

1. Wrap all the article in the div ; or
2. Apply the click action to the article and not to the div .

Something like this:

$("article.has-post-thumbnail").click(function() {
     window.location = $(this).find("a").attr("href");
     return false;
 });

Answer 2

change the code to this so that entire div is clickable

<a href="post-link" rel="bookmark">
    <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
    <div class="post-info">
    <h1 class="entry-title">[POST TITLE]</h1>
</div>
    <img width="624" height="400" src="[POST THUMBNAIL]" class="attachment-post-thumbnail wp-post-image">   
    </article>
</a>

because previously there was link for title only so i changed it now to the full article