Question

I have a HTML structure like this:-

<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>    
<article id="a_post" class="a_post">
<div id="thumbnail">
<img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/>
</div>
<div id="instant_video" class="instant_video">
<span class="close"></span>
    // Some content here
</div>
</article>

In the above HTML, <div id="instant_video" class="instant_video">
<span class="close"></span>
// Some content here
</div> has a css of display:none;.
All I want to do is when someone clicks on <img id="shine" src="wp-content/themes/dabanggknight/images/play.png"/> I want to slide down the div with the id of instant_video whose display is set to none in css.

Then when someone clicks on the span with the class of close, it fades out that particular div again.

But I’m having a severe problem with the jQuery selectors because I’m really amateur with it.

The code that I’m using slides in all the hidden divs with the id of instant_video and that’s where the problem persists.

All I want to do is slide down only the div inside the article tag which contains the image I clicked on.

The code that I’m currently using is as follows:-

jQuery(document).ready(function() {
    jQuery('img#shine').click(function() {
        jQuery('.instant_video').slideDown('fast')
    }); 
});
jQuery(document).ready(function() {
    jQuery('.close').click(function() {
        jQuery('.instant_video').fadeOut('slow')
    }); 
});

Answer 1

try this:

jQuery(document).ready(function($) {
   $('.a_post img').click(function() {
      $(this).closest('.a_post').find('.instant_video').slideDown('fast')
   });

   $('.close').click(function() {
      $(this).closest('.instant_video').fadeOut('slow')
   });
});

no need to have $(document).ready twice

also id tags must always be unique

because you have lot of instant_video you should use closest to get the one that is related to the img you clicked