To make whole div clickable? - html

Question

I have a template of handlebars in which there are multiple div which i need to make clickable.
However, in my div the text is dynamic, how will i be able to make whole div clickable. Here is the code
<div class="row">
{{#each event}} {{#is this.event ../eventName }}
<div class="col s12 m3 13 al">
<div class="card ">
<div class="card-image">
<img src="/Small/{{this.imageId}}.JPG">
<span class="imageClick"></span>
</div>
<div class="card-action sp1">
<div class="action-time">
<a href="/{{this.imageId}}/love" class="like sp">
<i class="material-icons fav">favorite</i>
</a>
<span id="{{this.imageId}}" class="like-text">{{this.love}}</span>
</div>
<div class="action-time">
<a href="/{{this.imageId}}/laugh" class="haha sp">
<i class="material-icons laugh">sentiment_very_satisfied</i>
</a>
<span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
</div>
<div class="action-time">
<a href="/{{this.imageId}}/sad" class="downvote sp">
<i class="material-icons down">trending_down</i>
</a>
<span id="{{this.imageId}}sad" class="downvote-text">{{this.sad}}</span>
</div>
{{!-- {{this.imageId}} --}}
</div>
<div class="card-action">
<a class="waves-effect waves-light btn share">button</a>
</div>
</div>
</div>
{{/is}} {{/each}}
I want to make my div action-time clickable with the link in the a tag. I tried to use the popular <span> solution like this but no use. It works for the last action-time making first two not working. How can i solve this.
Css code for action-time and card is:
.action-time{
display: inline-block;
border: 1px solid rgba(202, 202, 202, 0.733);
width: 32%;
padding-top:2px;
padding-left: 4px;
border-radius:8px;
}
and for card :
.card {
margin: 10px;
padding: 5px;
border-radius: 8px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.card-action {
padding: 5px 0px !important;
/* padding-right: 5px !important; */
}
Here is what my webpage looks like, I have multiple of those cards
I want to make the whole area in border of heart clickable, rather than just the image to heart.

Answer 1

You can update your html so that the <span> is inside your <a>.
<a href="/{{this.imageId}}/laugh" class="haha sp">
<i class="material-icons laugh">sentiment_very_satisfied</i>
<span id="{{this.imageId}}laugh" class="haha-text">{{this.laugh}}</span>
</a>
Displaying your <a> as a block element will have it fill up the entire <div>. Then you can float your <span> to the right and style it accordingly until it's where you want it exactly.
.action-time a {
display: block;
}
.action-time span {
float: right;
}

Answer 2

You can write some javascript to handle the operation
$(" .action-time").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
Looks for a link inside div with class of "action-time". Redirects to that links value when anywhere in div is clicked.