title: Iframe Not Loading on Button Click
body: <p>I've tried searching around with no luck.  I have a button group that will populate another button group once clicked on.  The second group of buttons is designed to populate iframes depending on which button is clicked.  However, the iframe will not populate.  What am I missing?</p>
  
  <p>I'm also trying to figure out how to hide the selections of the other buttons once I select a new button up top.  If I click on "Cars" for instance, it will show the second group of buttons.  If I click on "Part Number", it will still keep the group of buttons from "Cars" as well as display the "Part Number" button group.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function() 
     { 
        document.getElementById('model1').style.display = 'none';
     };
  
     function button1function(id){
  
        if(document.getElementById(id).style.display == 'none'){
           document.getElementById(id).style.display = 'initial';
        }else{
           document.getElementById(id).style.display = 'none';
        }
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      &lt;div class="mpi-options btn-group-md"&gt;
        &lt;button type="button" class="mpi-box1" id="mpi-box1" value='hide/show'     onclick="button1function('model1')"&gt;CAR&lt;/button&gt;
      &lt;/div&gt;
    
      &lt;form id="model1" class="taskList" style="display:none" onchange="showhide(this)"&gt;
        &lt;input type = "button" value="What is my car's color?"/&gt;
      &lt;/form&gt;
  
   
    &lt;div class="answer1 answers" style="width:100%;height:500px;display:none"&gt;
    &lt;div id="model1"&gt;Please enter search information&lt;/div&gt;
      &lt;iframe src="https://www.chevrolet.com/"
       width="100%" height="500" style="border-color:#666666" id="myiframe" allowfullscreen&gt;&lt;/iframe&gt;
      &lt;iframe src="https://www.ford.com/"
       width="100%" height="500" style="border-color:#666666" id="myiframe1" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JS:</p>
  
  <pre><code>window.onload = function() 
    { 
    document.getElementById('model1').style.display = 'none';
    };
  
    function button1function(id){
  
    if(document.getElementById(id).style.display == 'none'){
       document.getElementById(id).style.display = 'initial';
    }else{
       document.getElementById(id).style.display = 'none';
    }
    }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="mpi-options btn-group-md"&gt;
    &lt;button type="button" class="mpi-box1" id="mpi-box1" value='hide/show' 
     onclick="button1function('model1')"&gt;CAR&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;form id="model1" class="taskList" style="display:none" 
   onchange="showhide(this)"&gt;
             &lt;input type = "button" value="What is my car's color?"/&gt;
  &lt;/form&gt;
  
  &lt;div class="answer1 answers" style="width:100%;height:500px;display:none"&gt;
  &lt;div id="1"&gt;Please enter search information&lt;/div&gt;
  &lt;iframe src="https://www.chevrolet.com/"
                  width="100%" height="500" style="border-color:#666666" 
   id="myiframe" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;iframe src="https://www.ford.com/"
                  width="100%" height="500" style="border-color:#666666" 
   id="myiframe1" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>