iAmServer/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
ul {
    display: block;
    list-style: none;
}

ul li {
    cursor: pointer;
    padding: 10px;
    border: 10px;
    font-size: 30px;
}

ul li:hover {
    color: green;
}

.content {
    width: 50%;
    margin: auto;
    margin-top: 10px;
    border: 2px solid green;
    border-radius: 10px;
    height: 300px;
    overflow: hidden;
}
</style>
</head>
<body>
  <ul>
        <li id="first">a</li>
        <li id="second">b</li>
        <li id="third">c</li>
    </ul>

    <div class="content">

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    </div>
<script id="jsbin-javascript">
var arr = {
    first: '<h1> Hello World </h1>',
    second: '<iframe width="100%" height="300" src="https://www.youtube.com/embed/6kC4lzb1L9s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
    third: '<script id="cid0010000177663139169" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width:100%;height:300px;">{"handle":"tropangvibespinoyfm","arch":"js","styles":{"b":100,"v":0,"w":0,"p":10,"cnrs":0.25,"usricon":0.75}}<\/script>'
};

$('#first').on('click', function(e) {
    $('.content').html(arr.first).fadeIn('slow');
});

$('#second').on('click', function(e) {
    $('.content').html(arr.second).fadeIn('slow');
});

$('#third').on('click', function(e) {
    $('.content').html(arr.third).fadeIn('slow');
});
</script>


<script id="jsbin-source-css" type="text/css">ul {
    display: block;
    list-style: none;
}

ul li {
    cursor: pointer;
    padding: 10px;
    border: 10px;
    font-size: 30px;
}

ul li:hover {
    color: green;
}

.content {
    width: 50%;
    margin: auto;
    margin-top: 10px;
    border: 2px solid green;
    border-radius: 10px;
    height: 300px;
    overflow: hidden;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var arr = {
    first: '<h1> Hello World </h1>',
    second: '<iframe width="100%" height="300" src="https://www.youtube.com/embed/6kC4lzb1L9s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
    third: '<script id="cid0010000177663139169" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width:100%;height:300px;">{"handle":"tropangvibespinoyfm","arch":"js","styles":{"b":100,"v":0,"w":0,"p":10,"cnrs":0.25,"usricon":0.75}}<\/script>'
};

$('#first').on('click', function(e) {
    $('.content').html(arr.first).fadeIn('slow');
});

$('#second').on('click', function(e) {
    $('.content').html(arr.second).fadeIn('slow');
});

$('#third').on('click', function(e) {
    $('.content').html(arr.third).fadeIn('slow');
});</script></body>
</html>

## jsbin.yuzewajone.css
ul {
    display: block;
    list-style: none;
}

ul li {
    cursor: pointer;
    padding: 10px;
    border: 10px;
    font-size: 30px;
}

ul li:hover {
    color: green;
}

.content {
    width: 50%;
    margin: auto;
    margin-top: 10px;
    border: 2px solid green;
    border-radius: 10px;
    height: 300px;
    overflow: hidden;
}

## jsbin.yuzewajone.js
var arr = {
    first: '<h1> Hello World </h1>',
    second: '<iframe width="100%" height="300" src="https://www.youtube.com/embed/6kC4lzb1L9s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
    third: '<script id="cid0010000177663139169" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width:100%;height:300px;">{"handle":"tropangvibespinoyfm","arch":"js","styles":{"b":100,"v":0,"w":0,"p":10,"cnrs":0.25,"usricon":0.75}}</script>'
};

$('#first').on('click', function(e) {
    $('.content').html(arr.first).fadeIn('slow');
});

$('#second').on('click', function(e) {
    $('.content').html(arr.second).fadeIn('slow');
});

$('#third').on('click', function(e) {
    $('.content').html(arr.third).fadeIn('slow');
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	ul {
	display: block;
	list-style: none;
	}

	ul li {
	cursor: pointer;
	padding: 10px;
	border: 10px;
	font-size: 30px;
	}

	ul li:hover {
	color: green;
	}

	.content {
	width: 50%;
	margin: auto;
	margin-top: 10px;
	border: 2px solid green;
	border-radius: 10px;
	height: 300px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<ul>
	<li id="first">a</li>
	<li id="second">b</li>
	<li id="third">c</li>
	</ul>

	<div class="content">

	<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	</div>
	<script id="jsbin-javascript">
	var arr = {
	first: '<h1> Hello World </h1>',
	second: '<iframe width="100%" height="300" src="https://www.youtube.com/embed/6kC4lzb1L9s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
	third: '<script id="cid0010000177663139169" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width:100%;height:300px;">{"handle":"tropangvibespinoyfm","arch":"js","styles":{"b":100,"v":0,"w":0,"p":10,"cnrs":0.25,"usricon":0.75}}<\/script>'
	};

	$('#first').on('click', function(e) {
	$('.content').html(arr.first).fadeIn('slow');
	});

	$('#second').on('click', function(e) {
	$('.content').html(arr.second).fadeIn('slow');
	});

	$('#third').on('click', function(e) {
	$('.content').html(arr.third).fadeIn('slow');
	});
	</script>


	<script id="jsbin-source-css" type="text/css">ul {
	display: block;
	list-style: none;
	}

	ul li {
	cursor: pointer;
	padding: 10px;
	border: 10px;
	font-size: 30px;
	}

	ul li:hover {
	color: green;
	}

	.content {
	width: 50%;
	margin: auto;
	margin-top: 10px;
	border: 2px solid green;
	border-radius: 10px;
	height: 300px;
	overflow: hidden;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var arr = {
	first: '<h1> Hello World </h1>',
	second: '<iframe width="100%" height="300" src="https://www.youtube.com/embed/6kC4lzb1L9s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>',
	third: '<script id="cid0010000177663139169" data-cfasync="false" async src="http://st.chatango.com/js/gz/emb.js" style="width:100%;height:300px;">{"handle":"tropangvibespinoyfm","arch":"js","styles":{"b":100,"v":0,"w":0,"p":10,"cnrs":0.25,"usricon":0.75}}<\/script>'
	};

	$('#first').on('click', function(e) {
	$('.content').html(arr.first).fadeIn('slow');
	});

	$('#second').on('click', function(e) {
	$('.content').html(arr.second).fadeIn('slow');
	});

	$('#third').on('click', function(e) {
	$('.content').html(arr.third).fadeIn('slow');
	});</script></body>
	</html>