JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" onclick="showLinks(['box1','boxlink2','boxlink3','boxlink4']); hideLinks(['boxlink1','box2','box3','box4'])" class="boxlink" id="boxlink1" style="display:none;">box 1</a></p>
<div id="box1"> 
<p><IFRAME SRC="http://www.speedvid.net/embed-xf05deabdy29-560x315.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=560 HEIGHT=315 ALLOWFULLSCREEN></IFRAME></p> 
</div>

<a href="#" onclick="showLinks(['box2','boxlink1','boxlink3','boxlink4']); hideLinks(['boxlink2','box1','box3','box4'])" class="boxlink" id="boxlink2">box 2</a></p>
<div id="box2" style="display:none;"> 
<p><IFRAME SRC="http://www.speedvid.net/embed-xf05deabdy29-560x315.html" FRAMEBORDER=0 MARGINWIDTH=0 MARGINHEIGHT=0 SCROLLING=NO WIDTH=560 HEIGHT=315 ALLOWFULLSCREEN></IFRAME></p> 
</div>

<a href="#" onclick="showLinks(['box3','boxlink1','boxlink2','boxlink4']); hideLinks(['boxlink3','box1','box2','box4'])" class="boxlink" id="boxlink3">box 3</a></p>
<div id="box3" style="display:none;"> 
<p>Text of box 3</p> 
</div>

<a href="#" onclick="showLinks(['box4','boxlink1','boxlink2','boxlink3']); hideLinks(['boxlink4','box1','box2','box3'])" class="boxlink" id="boxlink4">box 4</a></p>
<div id="box4" style="display:none;"> 
<p>Text of box 4 </p> 
</div>

JavaScript

showLinks=function ( id ) { 
    for (var x=0; x<id.length; x++){
        $('#' + id[x]).show(); 
    }
} 
hideLinks = function ( id ) { 
    for (var x=0; x<id.length; x++){
        $('#' + id[x]).hide(); 
    }
}