JSFiddle - React, Tailwind, and code Playground

by Sameer Shemna

HTML

<div id="send1" style="visibility: visible; position: absolute">
<iframe src="http://en.wikipedia.org/wiki/Main_Page" name="send a request" width="960px" height="577px" frameborder="0" scrolling="no"></iframe>
</div>

<div id="send2" style="visibility: hidden; position: absolute">
<iframe src="http://en.wikipedia.org/wiki/Mascarene_martin" name="send a request" width="960px" height="577px" frameborder="0" scrolling="yes"></iframe>
</div>

<div id="send3" style="visibility: hidden; position: absolute">
<iframe src="http://en.wikipedia.org/wiki/Acacia_cultriformis" name="send a request" width="960px" height="577px" frameborder="0" scrolling="no"></iframe>
</div>

<div id="send4" style="visibility: hidden; position: absolute">
<iframe src="http://en.wikipedia.org/wiki/Battle_of_Halmyros" width="960px" height="577px" frameborder="0" scrolling="no"></iframe>
</div>

<div id="send5" style="visibility: hidden; position: absolute">
<iframe src="http://en.wikipedia.org/wiki/New_Detroit_Arena" width="960px" height="577px" frameborder="0" scrolling="no"></iframe>
</div>

<div id="nav_buttons">
    <button id="previous" onClick="switchPageBackward();" style="margin-top: 614px">Previous</button> <button id="next" onClick="switchPageForward();" style="margin-top: 614px">Next</button></div>

JavaScript

function hideAllPages(){
    for(var i=1; i<=5; i++){
        document.getElementById("send"+i).style.visibility="hidden"; 
    }
}


function switchPageForward() {
    if(current_page<5){
        current_page++; 
        hideAllPages();        document.getElementById("send"+current_page).style.visibility="visible";
    }
}
function switchPageBackward() {
    if(current_page>1){
        current_page--;
        hideAllPages();
document.getElementById("send"+current_page).style.visibility="visible";
    }
}


    
hideAllPages();
var current_page = 0;
switchPageForward();