Bootstrap Snippet Footer using HTML CSS Bootstrap Javascript

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<div class="container" style="background:#1e1e1e; width:100%; padding:0; min-height:225px;">
<div class="col-sm-12">
    <div class="row top-margin"></div>
    <div class="row">
        <div class="col-sm-12">
            <div class="col-md-4 stores">
                <img class="app-icon" src="http://placehold.it/135x40">
                <img class="app-icon pull-right" src="http://placehold.it/135x40">
            </div>
            <div class="col-md-4 brand">
                <img class="logo" src="http://placehold.it/228x30">
                <span class="copyright">Copyright © 2017 TRT World.</span>
            </div>
            
            <div class="accordion-group col-md-2">
    <div class="accordion-heading">
      <a class="accordion-toggle"  data-toggle="collapse" data-parent="toggle" href="#collapseOne">
       <i class="fa fa-minus"></i> TRT World
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <ul class="accordion-inner">
            <li><a href="">Topics</a></li>
            <li><a href="">Regions</a></li>
            <li><a href="">Sections</a></li>
            <li><a href="">Video</a></li>
            <li><a href="">Watch Live</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
.hr{margin:5px 0;}
.accordion-group{margin-bottom:10px;border-radius:0;}
.top-margin{margin-top:40px;}
.accordion-toggle:hover{
    text-decoration: none;
    
}
.accordion-heading .accordion-toggle {
    display: block;
    padding: 0px 0px 5px 0px;
    color:#f0f0f2;
    font-size:14px;
    font-weight:bold;
    line-height:1.43;
}
.selectStyle{
    width:46%; float: left; margin-right: 8%;
}
.accordion-group{
    margin-bottom:20px;
}
.accordion-group .accordion-body ul{
    list-style-type:none;
    padding:0;
    margin:0;
}
.accordion-group .accordion-body ul li{
    font-size:14px;
    line-height:1.43;
    color:#f0f0f2;
    opacity:0.75;
    margin-bottom:5px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// accordion pluse minus goes here        
   jQuery('.accordion-toggle').click(function(){
      
          var has = jQuery(this);
          if(has.hasClass('collapsed')){
                 jQuery(this).find('i').removeClass('fa-plus');
                 jQuery(this).find('i').addClass('fa-minus');
          }
          else{
              jQuery(this).find('i').removeClass('fa-minus');
              jQuery(this).find('i').addClass('fa-plus');
          }
    })
    $('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Footer"
Bootstrap 3.1.0 Snippet by serhatkaraca

Related: See More

Questions / Comments:

"Footer" Bootstrap 3.1.0 Snippet by serhatkaraca

Related: See More

Questions / Comments:

"Footer"
Bootstrap 3.1.0 Snippet by serhatkaraca