<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 class="btn btn-success btn-lg" onclick="content_change(1)">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="content_change(2)">paragraph</h1> <br>
<h1 class="btn btn-danger btn-lg" onclick="content_change(3)">Show all</h1>
</div>
<div class="col-md-8">
<div id="main">
<h1 id="heading">This is heading</h1>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur assumenda at aut dolor doloremque earum inventore, iure magni nesciunt porro quis veritatis voluptate? Assumenda necessitatibus quidem reprehenderit voluptas? Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut, dicta laudantium nam quam ratione rem sequi ullam vel? Ad animi delectus est libero maxime odit reiciendis, soluta! Harum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias beatae deleniti dolore excepturi iste iusto maxime nesciunt nihil, nisi obcaecati placeat quae similique sit soluta! Nemo praesentium qui quod!</p>
</div>
</div>
</div>
</div>
<script>
var main = document.getElementById('main');
var all_child = [];
for(var i = 0; i < main.childNodes.length; i++){
all_child.push( main.childNodes[i]);
}
function content_change(arg){
while(main.hasChildNodes()){
main.removeChild(main.firstChild);
}
switch (arg){
case 1:
main.appendChild(all_child[1]);
break;
case 2:
main.appendChild(all_child[3]);
break;
case 3:
for(var j = 0; j < all_child.length; j++){
main.appendChild(all_child[j]);
}
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
p{
margin-top: 25px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 class="btn btn-success btn-lg" onclick="content_change(1)">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="content_change(2)">paragraph</h1> <br>
<h1 class="btn btn-danger btn-lg" onclick="content_change(3)">Show all</h1>
</div>
<div class="col-md-8">
<div id="main">
<h1 id="heading">This is heading</h1>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aspernatur assumenda at aut dolor doloremque earum inventore, iure magni nesciunt porro quis veritatis voluptate? Assumenda necessitatibus quidem reprehenderit voluptas? Accusantium? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut, dicta laudantium nam quam ratione rem sequi ullam vel? Ad animi delectus est libero maxime odit reiciendis, soluta! Harum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci alias beatae deleniti dolore excepturi iste iusto maxime nesciunt nihil, nisi obcaecati placeat quae similique sit soluta! Nemo praesentium qui quod!</p>
</div>
</div>
</div>
</div>
<script>
var main = document.getElementById('main');
var all_child = [];
for(var i = 0; i < main.childNodes.length; i++){
all_child.push( main.childNodes[i]);
}
function content_change(arg){
while(main.hasChildNodes()){
main.removeChild(main.firstChild);
}
switch (arg){
case 1:
main.appendChild(all_child[1]);
break;
case 2:
main.appendChild(all_child[3]);
break;
case 3:
for(var j = 0; j < all_child.length; j++){
main.appendChild(all_child[j]);
}
}
}
</script>
</body>
</html>
