<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="col-md-12">
<div class="switch">
<span>Select Quick mode color</span>
<div class="slide">
<div class="color-bar">
<a href="javascript:void(0)" class="color-list orange"><span class="glyphicon glyphicon-ok"></span></a>
<a href="javascript:void(0)" class="color-list pink"></a>
<a href="javascript:void(0)" class="color-list purple"></a>
<a href="javascript:void(0)" class="color-list red"></a>
<a href="javascript:void(0)" class="color-list blue"></a>
<a href="javascript:void(0)" class="color-list green"></a>
<a href="javascript:void(0)" class="color-list black"></a>
<a href="javascript:void(0)" class="close">Cancel</a>
</div>
<div class="tab">
<span class="glyphicon glyphicon-chevron-right"></span>
</div>
</div>
</div>
</div>
<div class="col-md-12 m-t-20">
<div class="switch">
<div class="slide-2">
Quick mode color Click!
<div class="tab-2">
<span class="glyphicon glyphicon-chevron-up"></span>
</div>
</div>
<div class="color-bar-2">
<a href="javascript:void(0)" class="color-list orange"><span class="glyphicon glyphicon-ok"></span></a>
<a href="javascript:void(0)" class="color-list pink"></a>
<a href="javascript:void(0)" class="color-list purple"></a>
<a href="javascript:void(0)" class="color-list red"></a>
<a href="javascript:void(0)" class="color-list blue"></a>
<a href="javascript:void(0)" class="color-list green"></a>
<a href="javascript:void(0)" class="color-list black"></a>
<a href="javascript:void(0)" class="close-2">Cancel</a>
</div>
</div>
</div>
</div>
</body>
</html>
body {
padding: 50px;
}
.col-md-12 {
text-align: center;
}
.switch {
width: 300px;
height: 36px;
background: white;
overflow: hidden;
position: relative;
border-radius: 5px;
display: inline-block;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 1px 12px 0 rgba(0, 0, 0, 0.19);
}
.switch > span {
position: absolute;
font-size: 18px;
width: 100%;
margin-top: 6px;
color: #e0e0e0;
text-align: center;
left: 0;
cursor: default;
}
.slide {
width: 340px;
height: 36px;
background: white;
position: absolute;
left: -100%;
z-index: 100;
transition: left .7s;
-webkit-transition: left .5s;
-moz-transition: left .5s;
-o-transition: left .5s;
}
.slide-2 {
line-height: 40px;
width: 300px;
height: 36px;
cursor: pointer;
position: absolute;
text-align: center;
color: #e0e0e0;
font-size: 18px;
z-index: 1000;
background: #fff;
transition: left .7s;
top:0;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.slide-2.open {
top: -100%;
}
.color-bar-2 {
width: 300px;
height: 36px;
float: left;
background: #fff;
padding-top: 6px;
padding-left: 12px;
}
.close-2 {
float: right;
margin-top: 2px;
margin-right: 10px;
font-size: 18px;
color: #000;
font-weight: bold;
opacity: .2;
}
.close-2:hover, .close-2:focus{
text-decoration: none;
color: #000;
opacity: .5;
}
.tab-2 {
width: 40px;
height: 36px;
background: orange;
float: right;
text-align: center;
cursor: pointer;
border-radius: 0px 0px 0px 0px;
color: #fff;
}
.tab {
width: 40px;
height: 36px;
background: orange;
float: right;
text-align: center;
cursor: pointer;
border-radius: 0px 5px 5px 0px;
}
.tab > span {
font-size: 18px;
color: white;
margin-top: 8px;
}
.color-bar {
width: 300px;
height: 36px;
float: left;
background: #fff;
padding-top: 6px;
padding-left: 12px;
}
.slide.open {
left: 0;
}
.color-list {
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin-right: 2px;
position: relative;
color: ;
}
.color-list > span {
color: #fff;
position: absolute;
width: 100%;
text-align: center;
margin-top: 5px;
left: 0;
}
.red {
background: rgb(220, 81, 84);
}
.green {
background: rgb(78, 191, 142);
}
.purple {
background: rgb(176, 98, 178);
}
.blue {
background: rgb(106, 161, 195);
}
.black {
background: rgb(68, 68, 68);
}
.orange {
background: rgb(252, 176, 92);
}
.pink {
background: rgb(221, 131, 175);
}
.close {
float: right;
margin-top: 2px;
margin-right: 10px;
font-size: 18px;
}
$(document).ready(function(){
$(".tab").click(function() {
$(".slide").addClass("open");
});
$(".close").click(function() {
$(".slide").removeClass("open")
});
$(".color-bar > .color-list").click(function() {
$(".color-bar > .color-list").html('');
$(this).html('<span class="glyphicon glyphicon-ok"></span>');
let colorName = $(".tab").attr('class').split(' ')[1];
let newColor = $(this).attr('class').split(' ')[1];
$(".tab").removeClass(colorName).addClass(newColor);
});
$(".slide-2").click(function() {
$(this).addClass("open");
});
$(".color-bar-2 > .color-list").click(function() {
$(".color-bar-2 > .color-list").html('');
$(this).html('<span class="glyphicon glyphicon-ok"></span>');
let colorName = $(".tab-2").attr('class').split(' ')[1];
let newColor = $(this).attr('class').split(' ')[1];
$(".tab-2").removeClass(colorName).addClass(newColor);
});
$(".close-2").click(function() {
$(".slide-2").removeClass("open");
});
});
