CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Thomas Spade
Thomas Spade

Reputation: 744

jQuery - Hide & Show Specific iFrames on a Page

I have a site with several embedded YouTube videos using iframes. I hide all of them to start, they're being covered up by a thumbnail image. They need to show when the thumbnail image is clicked.

I had a working solution, but it required me adding classes or ids to each iframe/thumbnail. I will not be able to add any classes or ids to the iframe or the thumbnail image.

Here is what I had:

$( document ).ready(function() {
<!-- Hide iFrames -->
$(".contentIframe1").hide();
$(".contentIframe2").hide();
    <!-- iFrame1 Click Function -->
    $(".play-thumbnail1").click(function(){
        $(".contentIframe1").show();
    });
    <!-- iFrame2 Click Function -->
    $(".play-thumbnail2").click(function(){
        $(".contentIframe2").show();
    });

});

HTML:

<iframe class="contentIframe1" width="1280" height="720" src="https://www.youtube.com/embedurl" frameborder="0" allowfullscreen></iframe>

  <div class="play-button"></div>
  <img class="play-thumbnail1" src="imgurl" alt="" />

Would it be possible to get the same effect without adding different classes to each thumbnail and iframe?

Here's the new html for every single iframe on the page:

<iframe width="1280" height="720" src="https://www.youtube.com/embedurl></iframe>

  <div class="play-button"></div>
  <img class="play-thumbnail" src="imgurl" alt="" />

Here's the new jQuery:

$( document ).ready(function() {
<!-- Hide iFrames -->
$("iframe").hide();
    <!-- iFrame Click Function -->
$(".play-thumbnail").click(function(){
$("iframe").show();
});     
});

This of course just hides and shows them all at the same time. I figured I'd have to use .each() to loop through each of the thumbnails and somehow make it only show the corresponding iFrame.

Is this even possible?

Upvotes: 0

Views: 2096

Answers (2)

Shaunak D
Shaunak D

Reputation: 20636

You can use children() to get the corresponding iframe

$(".play-thumbnail").click(function(){
    //if you need to hide currenly visible iframes use $('iframe').hide()
    $(this).closest('div').children("iframe").show();
});

Upvotes: 1

Sougata Bose
Sougata Bose

Reputation: 31749

Add class to them - 

<iframe class='myclass' ...

And Try this - 

$('.myclass').each(function() {
    $(this).hide();
})

If you need to add some checks then - 

$('.myclass').each(function() {
  if (check) {
    $(this).hide();
  }
})

Upvotes: 0

Related Questions