Question

got a question, is it possible to hide image and show iframe which are inside the div, but to apply these changes just in this div, there are multiple div with the same class, for example:

<div class="youtube_thumb">
    <img src="http://img.youtube.com/vi/R7JRGQ-UXBU/0.jpg" style="width:325px;border:0;" />
    <iframe width="325" height="250" src="http://www.youtube.com/embed/R7JRGQ-UXBU" frameborder="0" allowfullscreen></iframe>
</div>
<div class="youtube_thumb">
    <img src="http://img.youtube.com/vi/I0RBPgVBTKA/0.jpg" style="width:325px;border:0;" />
    <iframe width="325" height="250" src="http://www.youtube.com/embed/I0RBPgVBTKA" frameborder="0" allowfullscreen></iframe>
</div>

and style:

.youtube_thumb iframe { display:none; }

all i want is when i click on image, is to hide this image and show the iframe, but just for one div, as u can see there are multiple divs with the same class, is it possible using javascript or jquery?

thank you all for the help!

Answer 1

using jquery quick and dirty:

$('.youtube_thumb > img').click(function(){
    var $img = $(this);
    $img.hide();
    $img.next().show();
});