View difference between Paste ID: aRWV5q7s and AYtHzEcF

 // demo panel
 
 // this is for html code
 	<!-- demo panel start -->
 		<div class="control">
 			<span class="hide-pan0"><i class="fa fa-angle-right"></i></span>
 			<span class="hide-pan00"><i class="fa fa-angle-left"></i></span>
 		</div>
 	<div class="demo-panel">
 	<h2>Demo Panel Color Scheme</h2>
 		<ul>
 			<li class="red-color"></li>
 			<li class="green-color"></li>
 			<li class="pink-color"></li>
 			<li class="blue-color"></li>
 			<li class="yellow-color"></li>
 			<li class="black-color"></li>
 			<li class="orange-color"></li>
 			<li class="white-color"></li>
 		</ul>
 	</div>
 	<!-- demo panel end -->
 
 
 
 
 
 // this is for css
 /* demo panel css*/
 .demo-panel{width:250px;height:300px;background-color:#ccc;top:40px;left:0;z-index:9999;position:fixed;display:none;}
 .demo-panel ul{margin:10px 5px;padding:0;list-style:none;}
 .demo-panel ul li{width:40px;height:40px;display:inline-block;cursor:pointer;}
 .demo-panel ul li.red-color{background-color:red;}
 .demo-panel ul li.green-color{background-color:green;}
 .demo-panel ul li.pink-color{background-color:pink;}
 .demo-panel ul li.blue-color{background-color:blue;}
 .demo-panel ul li.yellow-color{background-color:yellow;}
 .demo-panel ul li.black-color{background-color:black;}
 .demo-panel ul li.orange-color{background-color:orange;}
 .demo-panel ul li.white-color{background-color:white;}
 .demo-panel ul li:hover{}
 .control span.hide-pan0{background-color: #000000;color: #FFFFFF;z-index:999;cursor: pointer;float: left;margin-left: -250px;padding:8px 18px;}
 .control span.hide-pan00{background-color:red;color:#fff;float:right;padding:8px 18px;cursor:pointer;display:none;}
 .control{left: 250px;position: fixed;z-index:999;top:40px;font-size:20px;}
 .control span.hide-pan0 i{}
 .display-none{display:none;transition:ease 0.9s all;}
 .display-block{display:block;transition:ease 0.9s all;}
 
 body.red-color{background-color:red;}
 body.green-color{background-color:green;}
 body.pink-color{background-color:pink;}
 body.blue-color{background-color:blue;}
 body.yellow-color{background-color:yellow;}
 body.black-color{background-color:black;}
 body.orange-color{background-color:orange;}
 body.white-color{background-color:white;}
 
 
 
 
 // this for js
 
 // Demo panel ja active
 
   $(document).ready(function(){
 		$('li.red-color').click(function(){
 		$('body').addClass('red-color').removeClass('green-color pink-color blue-color yellow-color black-color white-color');
 		});
 
 		$('li.green-color').click(function(){
 		$('body').addClass('green-color').removeClass('red-color pink-color blue-color yellow-color black-color orange-color white-color');
 		});
 
 		$('li.pink-color').click(function(){
 		$('body').addClass('pink-color').removeClass('red-color green-color blue-color yellow-color black-color orange-color white-color');
 		});
 
 		$('li.blue-color').click(function(){
 		$('body').addClass('blue-color').removeClass('red-color green-color pink-color yellow-color black-color orange-color white-color');
 		});
 
 		$('li.yellow-color').click(function(){
 		$('body').addClass('yellow-color').removeClass('red-color green-color pink-color blue-color black-color orange-color white-color');
 		});
 
 		$('li.black-color').click(function(){
 		$('body').addClass('black-color').removeClass('red-color green-color pink-color blue-color yellow-color orange-color white-color');
 		});
 
 		$('li.orange-color').click(function(){
 		$('body').addClass('orange-color').removeClass('red-color green-color pink-color blue-color yellow-color black-color white-color');
 		});
 
 		$('li.white-color').click(function(){
 		$('body').addClass('white-color').removeClass('red-color green-color pink-color blue-color yellow-color black-color orange-color');
 		});
 
 		// panel cross
 		$('span.hide-pan0').click(function(){
 		$(this).hide();
 		$('span.hide-pan00').show();
 		$('.demo-panel').addClass('display-block').removeClass('display-none');
 		});
 
 		$('span.hide-pan00').click(function(){
 		$(this).hide();
 		$('span.hide-pan0').show();
 		$('.demo-panel').addClass('display-none').removeClass('display-block');
 		});
   });