<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="social-icons">
<div class="feed-back">
<ul>
<li><li class="fa fa-chevron-down"></li></li>
<li><li class="fa fa-comment"></i></li>
<li><li class="fa fa-chevron-down"></li></li>
</ul>
</div>
<div class="col-87">
<ul>
<li data-toggle="tooltip" title="Facebook"><a href="#" ><i class="fa fa-facebook"></i></a></li>
<li data-toggle="tooltip" title="Twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li data-toggle="tooltip" title="Google plus"><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li data-toggle="tooltip" title="Instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
.feed-back ul {
padding: 0;
position: relative;
top: -9px;
}
.feed-back li {
height: 15px;
list-style: outside none none;
}
.social-icons .col-87 li a{
color:#fff;
}
.social-icons {
height: 100px;
width: 295px;
margin-top:20px;
}
.feed-back {
background: none repeat scroll 0 0 red;
color: #fff;
cursor: pointer;
float: right;
height: 100px;
position: relative;
text-align: center;
width: 30px;
z-index: 2147483647;
-webkit-box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
-moz-box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
box-shadow: -5px 0px 3px -3px rgba(0,0,0,0.32);
}
.col-87 {
background: none repeat scroll 0 0 #fff;
display: none;
float: left;
height: 100px;
width: 265px;
-webkit-box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
-moz-box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
box-shadow: -6px 2px 5px 1px rgba(0,0,0,0.37);
}
.col-87 ul {
float: left;
padding: 24px 16px 14px;
}
.col-87 ul li {
background: none repeat scroll 0 0 red;
border-radius: 35px;
float: left;
height: 50px;
list-style: outside none none;
margin-right: 8px;
width: 50px;
-webkit-box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
-moz-box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
box-shadow: inset 1px -7px 5px 0px rgba(0,0,0,0.37);
}
.col-87 ul li:hover{
background:#777676;
cursor:pointer;
}
.fa.fa-facebook,.fa.fa-twitter,.fa.fa-google-plus,.fa.fa-instagram {
left: 19px;
position: relative;
top: 15px;
}
$(document).ready(function(){
$('.feed-back').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$(this).find(".fa-chevron-down").css({"-ms-transform": "rotate(0deg)", "-webkit-transform": "rotate(0deg)" , "transform": "rotate(0deg)" , "-webkit-transition-duration": "1s" , "-moz-transition-duration": "1s" , "-o-transition-duration": "1s" , "transition-duration": "0.5s"});
} else {
$(this).find(".fa-chevron-down").css({"-ms-transform": "rotate(180deg)", "-webkit-transform": "rotate(180deg)" , "transform": "rotate(180deg)" , "-webkit-transition-duration": "1s" , "-moz-transition-duration": "1s" , "-o-transition-duration": "1s" , "transition-duration": "0.5s"});
}
$(this).data("clicks", !clicks);
});
});
<!-- -->
$(document).ready(function(){
$(".feed-back").click(function(){
$(".col-87").slideToggle("500");
});
});
<!-- -->
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
