Sometimes we need to make an entire column clickable, instead of just the link (or links) within the column. This is a common issue when using a card style design.

For example, in the image above, we might want each of the three sections themselves to be clickable, instead of just the text and image. If we give the row we’re working on a class name of column-click, we can use the following Javascript code to automatically make the entire column clickable. It will take whatever link URL it finds within the column, and apply it to the entire column.

jQuery(document).ready(function( $ ) {
	$('body:not(.fl-builder-edit)').find('.column-click a').closest('.fl-col-content').click(function(){
		var link = $(this).find('a').attr('href');
		$(location).attr('href', link);
	});
});

(You can use the Additional JS plugin to quickly and easily add Javascript snippets to your site via the customizer).

Starting off with (‘body:not(.fl-builder-edit)’) ensures that this doesn’t run when editing the page with Beaver Builder.

We will also want to add the following CSS to our site to make sure the mouse cursor indicates that the entire area is clickable.

.column-click .fl-col-content {
	cursor: pointer;
}

If we want to use this trick for cards created by the Posts module, we just need to change .fl-col-content to .fl-post-grid-post, both in the Javascript and the CSS listed above.