Make Whole Block Content Clickable With JOLD Js-block Plugin

File Size: 32.1 KB
Views Total: 347
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src="" 
<script src="jquery.jold.js-block.min.js"></script>

2. Insert a link into your block content.

<div class="block-example">
  <img src="" 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="">Example</a>

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


4. Indicate the block content is clickable.

.js-block {
  cursor: pointer;



  • 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.