Revealing and hiding specific div with iframe inside with button - html

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">1</button>
<button class="button">2</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>
</div>
</div>
</div>
</div>

Answer 1

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/

Answer 2

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