MariaL MariaL - 1 year ago 69
HTML Question

Click event only on specific div

I've got a page with product images on it and above each image is a 'more info' button. When clicked there is an overlay over the image with more information.
The html looks something like this:

<div class=“products_overlay overlay_test”>
<div class=“products_overlay_info”>
<div class=“product_more_info”>
<span>More Info</span>

<ul class=“hover_text”>
<li class=“product_less_info”><span>Less Info</span></li>

Now once the overlay is visible there's another button which says 'less info' and once clicked it hides the overlay with the extra information. This is the jQuery for it:

$j('.product_more_info').on('click', function(){


$j('.product_less_info').on('click', function(event){

This works, however my problem is that it's a list of products/images so when the user click 'more info' and it hides that div it hides the div for all the products/images , not just the one the user clicked on.
I've tried using
but with no luck.

$j('.product_more_info').on('click', function(){


Any ideas how to achieve this?

Answer Source

Try this

$j('.product_more_info').on('click', function(){
    $j('.product_less_info', $j(this).parents('.products_overlay')).show();