Make the whole icon box clickable

How to?

  1. Add Icon box widget to the content area and add the specific link 
  2. Don’t forget to add class to the Icon box
  3. Add the Javascript code below to the code block

JS:

				
					    jQuery(function ($) {
        $(".op-icon-click .elementor-icon-box-content").each(function () {
            var href = $(this).find("a").attr("href");
            var anchorInner = $(this).find("a").html();
            $(this).find("h3").html(anchorInner);
            $(this).wrapInner('<a href="' + href + '"></a>');
        });
    });

Update

To get the href attribute of links inside the icon box content elements using jQuery, here's a script example with detailed logging: 

				
					/* [JS] make whole icon box clickable */
jQuery(function ($) {
    $(".make-iconbox-clickable .elementor-icon-box-content").each(function () {
        var $originalLink = $(this).find("a");

        if ($originalLink.length) {
            var href = $originalLink.attr("href");
            var anchorInner = $originalLink.html();

            // Clone all attributes from original <a>
            var attributes = "";
            $.each($originalLink[0].attributes, function () {
                attributes += this.name + '="' + this.value + '" ';
            });

            $(this).find(".elementor-icon-box-title").html(anchorInner);

            // Wrap the whole .elementor-icon-box-content content with new <a> having the same attributes
            $(this).wrapInner("<a " + attributes.trim() + "></a>");
        }
    });
});

Example:

Legal

Learn More