<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.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="showHeading()">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="showParagraph()">paragraph</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. 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 heading = document.getElementById('heading');
var paragraph = document.getElementById('paragraph');
main.removeChild(heading);
main.removeChild(paragraph);
main.appendChild(heading);
presentNode = 'heading';
previousNode = 'heading';
function removeAddNode(){
switch (previousNode){
case 'heading':
main.removeChild(heading);
break;
case 'paragraph':
main.removeChild(paragraph);
break;
default :
break;
}
previousNode = presentNode;
switch (presentNode){
case 'heading':
main.appendChild(heading);
break;
case 'paragraph':
main.appendChild(paragraph);
break;
default :
break;
}
}
function showParagraph(){
presentNode = "paragraph";
removeAddNode();
}
function showHeading(){
presentNode = "heading";
removeAddNode();
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.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="showHeading()">Heading</h1><br>
<h1 class="btn btn-warning btn-lg" onclick="showParagraph()">paragraph</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. 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 heading = document.getElementById('heading');
var paragraph = document.getElementById('paragraph');
main.removeChild(heading);
main.removeChild(paragraph);
main.appendChild(heading);
presentNode = 'heading';
previousNode = 'heading';
function removeAddNode(){
switch (previousNode){
case 'heading':
main.removeChild(heading);
break;
case 'paragraph':
main.removeChild(paragraph);
break;
default :
break;
}
previousNode = presentNode;
switch (presentNode){
case 'heading':
main.appendChild(heading);
break;
case 'paragraph':
main.appendChild(paragraph);
break;
default :
break;
}
}
function showParagraph(){
presentNode = "paragraph";
removeAddNode();
}
function showHeading(){
presentNode = "heading";
removeAddNode();
}
</script>
</body>
</html>
No comments:
Post a Comment