JSFiddle - React, Tailwind, and code Playground

by otemu

HTML

<ul id="someMenu">
        <li><a href="#" id="small">load small calculator</a></li>
        <li><a href="#" id="medium">load medium calculator</a></li>
        <li><a href="#" id="large">load large calculator</a></li>
	</ul>
<h3>load some content below</h3>
<div id="content"><div>

JavaScript

$(document).ready(function(){
    $("a").on("click",function(){
        switch(this.id){
            case "small":
               $("div#content").html('<iframe width="320" height="390" src="http://web2.0calc.com/widgets/minimal/" scrolling="no" style="border: 1px solid #silver;"> </iframe>');               
                break;
            case "medium":
               $("div#content").html('<iframe width="340" height="575" src="http://web2.0calc.com/widgets/vertical/" scrolling="no" style="border: 1px solid #silver; "></iframe>');               
                break;                  
            case "large":
               $("div#content").html('<iframe width="590" height="390" src="http://web2.0calc.com/widgets/horizontal/" scrolling="no" style="border: 1px solid #silver; "></iframe>');               
                break;           
            default:
              console.log("do nothing");             
        }
        return false;
    })
})