Clickable DIVs – jQuery plugin Clickable DIVs jQuery plugin will convert anything (<div>, <li>, <p>, etc.) into a clickable object. It is a great way to enhance the usability of your website by increasing the clickable space to your users while avoiding extra HTML markup or a somehow tedious re-coding of your website. Works with JavaScript disabled too (graceful degradation) […]

Clickable DIVs jQuery plugin will convert anything (<div>, <li>, <p>, etc.) into a clickable object. It is a great way to enhance the usability of your website by increasing the clickable space to your users while avoiding extra HTML markup or a somehow tedious re-coding of your website.

• Works with JavaScript disabled too (graceful degradation)
• Works in all modern, mobile and old browsers: Firefox, Chrome, Opera, Safari, Internet Explorer (including IE6), touch screens (iPhone, iPad, Android), etc.
• Detects if link needs to be opened in a new page or the same one
• 1 line of code, easy to install (paste the code and add click class to the div)
• Works with div, li, p, h1 or any other HTML element

This small plugin is being used in this website already. This is how my front page looks like:

The red area symbolizes the clickable area where the link would work for users visiting the website. The black square shows you the existing markup of each listed item.

By adding a simple click class to the list element, it inherits the click bind of the <a> in it and everything becomes a link. The plugin will also detect if the link is set to open in a new window. Look at the clickable area after enabling the plugin:

You can see a working demo at the bottom of this page.

Usage

You could add this plugin as an external file but since it is so tiny, the best way of doing it is to embed it into an existing .js file.
1. Add this code inside the DOM ready function of your jQuery:

/* Clickable divs - Copyright Xavi Esteve 2011 Dual licensed under the MIT or GPL Version 2 licenses. https://xaviesteve.com/clickable-divs-jquery-plugin */
$('.click').css("cursor","pointer").click(function(){var link=$(this).find('a:first');var linkhref=link.attr('href');if(link.attr('target')){var newWindow=window.open(linkhref,link.attr('target'));newWindow.focus()}else{window.location=linkhref}return false});

2. Add the CSS class link to any element you want to inherit the click (a <li> for example).

Source code

Feel free to modify and improve the script by going to ClickableDivs at jsFiddle.