javascript - How can I apply a link over this entire div? -

i have div on home page displays 10 popular products in woocommerce store.

html:

<div id="trending">     <p class="trending-title">trending products</p>     <?php echo do_shortcode('[best_selling_products per_page="10" columns="5"]'); ?>     <p class="please-scroll">*please type in delivery postcode in search bar above see thousands of trending products available in area.</p> </div> 

i want users purchase these products require them type in postcode first. i've removed ability individual products clickable using code:

#trending .woocommerce ul.products li.product {     margin-bottom: 3%;     pointer-events: none; } 

now want whole div clickable 1 link redirect link users can type in postcode , proceed. i've tried:

<a class="to-scroll" href="http://localhost:8888/devo-wordpress/information">     <div id="trending">         <p class="trending-title">trending products</p>         <?php echo do_shortcode('[best_selling_products per_page="10" columns="5"]'); ?>         <p class="please-scroll">*please type in delivery postcode in search bar above see thousands of trending products available in area.</p>     </div> </a> 

css:

a.to-scroll {     z-index: 1;     display: block; } 

but doesn't work. have insight how can create sort of link overlay entire contents of div clickable 1 link? thank in advance!

you have create link inside div class of ".trending". redirects links value when anywhere in div clicked.

$(".trending").click(function() {    window.location = $(this).find("a").attr("href");     return false;  });

<div class="trending">    content goes here.    <a href="http://example.com"></a>  </div>