Make Whole Block Content Clickable With JOLD Js-block Plugin

JOLD Js-block is a small yet useful jQuery plugin that looks for the first link inside your block content and applies the link to the whole block to maximizes the click area.

See also:

• jQuery Plugin To Increase The Clickable Area For Links - hitMe

How to use it:

1. Insert the minified version of the JOLD Js-block plugin after jQuery library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.jold.js-block.min.js"></script>

2. Insert a link into your block content.

<div class="block-example">
  <img src="https://placeimg.com/640/480/any" alt="">
  <p>Cum sociis natoque penatibus et magnis dis parturient. Nihil hic munitissimus habendi senatus locus, nihil horum? Magna pars studiorum</p>
  More Content Here...
  <a href="https://www.jqueryscript.net">Example</a>
</div>

3. Call the plugin on the top container. That's it.

(function($){
  $('.block-example').joldJsBlock();
})(jQuery);

4. Indicate the block content is clickable.

.js-block {
  cursor: pointer;
}

Changelog:

2019-12-05

• v1.0.5

---

This awesome jQuery plugin is developed by joldnl. For more Advanced Usages, please check the demo page or visit the official website.