Search code examples
javascriptiframephpgrid

2 iFrame's have to become one

I've got 2 iFrames, but I want to hide one and when a button is clicked I want them to switch. So far there are 2 iFrames but I'll probably need more, way more (like 19). Is it possible to something such as this?

Waiting for your response, and thanks in advance!

  • jelmer
Solution

  • You start by hiding all the iframes with css.

    iframe {
   display:none;     
}

    In Javascript you set the display of the first IFrame to block and you create a Variable which stores a numeric number which Frame to show (0=first, 1=second, etc)

    var iframearray = document.getElementsByTagName("iframe");
iframearray[0].style.display = "block";
var visibleFrame = 0;

    Then you make a button, with an onClick event.

    <input type="button" onClick="hideNext" />

    And at last you make the Javascript function to show the next Frame

    function hideNext(){
iframearray[visibleFrame ].style.display = "none";
visibleFrame++;
iframearray[visibleFrame ].style.display = "block";
}