使用按钮在iframe中显示和隐藏特定的div

Question

I´m just trying to do website for family member. I´ve got base html with css done, but there is one issue. I need to implement to page changing iframe that is linked to two kinds of forms in php. Right now I´ve figured out code for change hrefs, but these iframes have different heights so I want to close both of them into divs and reveal first or second with buttons.

Here is the code so far:

    <section id="predplatne" class="clearfix">
  <div class="predplatne_in">
    <h2>Text</h2>
    <div class="vyber">
      <button class="button"><a href="http://www.php" target="frame">1</a></button>
      <button class="button"><a href="http://www.php2" target="frame">2</a></button>
    </div>
  <div class="box">
    <div class="in">
      <iframe allowfullscreen frameborder="0" height="1700" id="frame" name="frame" src="http://www.php" width="480"></iframe> <a href="http://www.php" target="frame"></a> <a href="http://www.php2" target="frame"></a>
    </div>
  </div>
</div>
  </div>   

Answer 1

You can achieve with some methods below

 #if1, #if2{ display:none; } #btn1:active ~ div #if1, #btn2:active ~ div #if2{ display:block; } #rd1:checked ~ div #if1, #rd2:checked ~ div #if2{ display:block; } #cb1:checked ~ div #if1, #cb2:checked ~ div #if2{ display:block; } 

 <!-- Reveal with active button --> <button id="btn1">Reveal Frame 1</button> <button id="btn2">Reveal Frame 2</button> <br> <!-- Reveal with checked radio --> <input type="radio" id="rd1" name="reveal"> <label for="rd1">Reveal Frame 1</label> <input type="radio" id="rd2" name="reveal"> <label for="rd2">Reveal Frame 2</label> <br> <!-- Reveal with checked checkbox --> <input type="checkbox" id="cb1"> <label for="cb1">Reveal Frame 1</label> <input type="checkbox" id="cb2"> <label for="cb2">Reveal Frame 2</label> <div> <iframe width="100px" id="if1" src="http://google.com">Test</iframe> <iframe width="200px" id="if2" src="http://amazon.com">Test</iframe> </div> 

The easiest way is use javascript than just html and css

Hope it helps

Answer 2

You can use JS for that. From what I've understood, you want to show an <iframe> when the button is clicked?

First off, create your <iframe> s and set both of their CSS display values to none , like so:

<div class="iframes">
  <iframe allowfullscreen style="display: none" frameborder="0" height="300" width="480" name="frame1" src="http://example.com"></iframe>
  <iframe allowfullscreen style="display: none" frameborder="0" height="300" width="240" name="frame2" src="http://thedragonring.me"></iframe>
</div>

Then, add some <button> s with a little script in their onclick attributes that will toggle whether the display attribute of the corresponding <iframe> is set to none or block , like so:

<div class="buttons">
  <button onclick="
    const el = document.querySelector('.iframes [name=frame1]');
    el.style.display = el.style.display === 'none' ? '' : 'none';
  ">
    Frame 1 (example.com)
  </button>
  <button onclick="
    const el = document.querySelector('.iframes [name=frame2]');
    el.style.display = el.style.display === 'none' ? '' : 'none';
  ">
    Frame 2 (thedragonring.me)
  </button>
</div>

Alternatively, you could add a single button that will toggle between the 2 iframes:

<button onclick="
  const frame1 = document.querySelector('.iframes [name=frame1]'),
    frame2 = document.querySelector('.iframes [name=frame2]'),
    prev = frame1.style.display;
  frame1.style.display = prev === 'none' ? '' : 'none';
  frame2.style.display = prev === 'none' ? 'none' : '';
">
  Toggle
</button>

Basically, all these snippets of JS do is inverse the display attribute of the target <iframe> . You can see a demo @ http://jsfiddle.net/TheDragonRing/4bzrvnyh/