demo panel

// 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');
		});
  });