Bootstrap Snippet Social icon for sidebar using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(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()
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Social icon for sidebar"
Bootstrap 3.3.0 Snippet by ajithraj

Related: See More

Questions / Comments:

"Social icon for sidebar" Bootstrap 3.3.0 Snippet by ajithraj

Related: See More

Questions / Comments:

"Social icon for sidebar"
Bootstrap 3.3.0 Snippet by ajithraj