0

I have the below code on my website to show/hide several iframes. I actually have 7 other divs with the same code to show the div associated with each link and hide all others. Every div works except the most recent one I added (iframe9). As far as I can tell the code is exactly the same for the previous 8 divs, but for some reason the ninth one does not toggle.

The CSS seems to work fine. I can either show or hide div 9 by adding or removing it from the first portion of my CSS.

Below is my HTML

<div id="link" onClick="toggleFrame8();"><p class="frame-colors" style="text-align: center;">Frame8</p></div>

&nbsp;

<div id="iframe8" class="frame-container"><iframe src="https://www.google.com/" width="800" height="460" frameborder="0" marginwidth="0" marginheight="0">Loading...</iframe></div>
<br id="br8">

&nbsp;

<div id="link" onClick="toggleFrame9();"><p class="frame-colors" style="text-align: center;">Frame9</p></div>

&nbsp;

<div id="iframe9" class="frame-container"><iframe src="https://www.google.com/" width="800" height="460" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe></div>
<br id="br9">

Below should be the applicable CSS

#iframe8, #br8, #iframe9, #br9 {
    display: none;
}

.frame-container {
    border: 2px solid #ffd700;
    height: 0;
    position: relative;
    padding-bottom: 75%;
    overflow: hidden;
 }
.frame-container iframe {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#link {
    cursor: pointer;
}

Below is the JS

var Frame8 = document.getElementById("iframe8");                
var Break8 = document.getElementById("br8");    
var Frame9 = document.getElementById("iframe9");                
var Break9 = document.getElementById("br9"); 

function toggleFrame8() {                   
    Frame8.style.display = ((Frame8.style.display!='block') ? 'block' : 'none');                    
    Break8.style.display = ((Break8.style.display!='inline') ? 'inline' : 'none');                  
    if (Frame8.style.display === "block" || Break8.style.display === "block") {                         
    Frame9.style.display = "none";                  
    Break9.style.display = "none";              
    }           
} 

function toggleFrame9() {                   
    Frame9.style.display = ((Frame9.style.display!='block') ? 'block' : 'none');                    
    Break9.style.display = ((Break9.style.display!='inline') ? 'inline' : 'none');                  
    if (Frame9.style.display === "block" || Break9.style.display === "block") {                         
    Frame8.style.display = "none";                  
    Break8.style.display = "none";              
    }           
}

I'm really hoping someone can point out what is probably an obvious issue with my code.

Brian
  • 11
  • 1
    http://stackoverflow.com/questions/27358966/how-to-set-x-frame-options-on-iframe read first answer here – Paul Fitzgerald Aug 29 '16 at 23:29
  • Also in your HTML Example you have two _div_ elements with id attribute "link" - id attributes should be unique (see [this post](http://programmers.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really) for more info) – Sᴀᴍ Onᴇᴌᴀ Aug 29 '16 at 23:40
  • much of this code doesn't make sense ... Break#.style.display will NEVER === 'block', because you never set it to block – Jaromanda X Aug 29 '16 at 23:47

0 Answers0