CODEWITHSUNDEEP
javascriptjqueryyoutubehideshow
user745110
user745110

Reputation: 119

hide image and show iframe but in one div with multiple class

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!

Upvotes: 0

Views: 1732

Answers (4)

Matthew
Matthew

Reputation: 25773

What I would do is put an anchor (a) around the image.

$(document).ready(function(){
    $('.youtube_thumb a').click(function(){
        var $self = $(this);
        $self.closest('.youtube_thumb').addClass('active');
    });
});

And then some css...

.youtube_thumb iframe { display:none; }
.youtube_thumb.active iframe { display:block; }
.youtube_thumb.active a { display: none; }

Upvotes: 0

Samantha Branham
Samantha Branham

Reputation: 7441

Try this:

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

Upvotes: 0

Lior Cohen
Lior Cohen

Reputation: 9055

$('.youtube_thumb img').click(function()
{
  $(this).css('display','none');
  $('iframe', $(this).parent()).css('display','');
});

Upvotes: 0

Andreas
Andreas

Reputation: 1622

using jquery quick and dirty:

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

Upvotes: 1

Related Questions