<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> <div class="accordion-group col-md-2"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseTwo"> <i class="fa fa-minus"></i> Where To Watch </a> </div> <div id="collapseTwo" class="accordion-body collapse in"> <ul class="accordion-inner"> <li><a href="">iOS</a></li> <li><a href="">Android</a></li> <li><a href="">Youtube</a></li> <li><a href="">TV Schedule</a></li> </ul> </div> </div> <div class="accordion-group col-md-2"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseThree"> <i class="fa fa-minus"></i> Corporate </a> </div> <div id="collapseThree" class="accordion-body collapse in"> <ul class="accordion-inner"> <li><a href="">About TRT World</a></li> <li><a href="">Partnerships</a></li> <li><a href="">Terms Of Use</a></li> <li><a href="">Careers</a></li> <li><a href="">Contact Us</a></li> </ul> </div> </div> <div class="accordion-group col-md-2"> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="toggle" href="#collapseFour"> <i class="fa fa-minus"></i> Legal </a> </div> <div id="collapseFour" class="accordion-body collapse in"> <ul class="accordion-inner"> <li><a href="">Partnership</a></li> <li><a href="">Terms Of Use</a></li> <li><a href="">Privacy Policy</a></li> </ul> </div> </div> <div class="col-md-4 brand-mobile"> <span class="copyright">Copyright © 2017 TRT World.</span> </div> </div> </div> </div> </div>

.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; } .accordion-group .accordion-body ul li a{ color:#f0f0f2; opacity:0.75; } .brand{ text-align:center; } .brand .copyright{ display:block; font-size: 12px; font-weight: bold; line-height: 16px; color: #f0f0f2; opacity: 0.75; } .brand-mobile{ text-align:center; display:none; } .brand-mobile .copyright{ display:block; font-size: 12px; font-weight: bold; line-height: 16px; color: #f0f0f2; opacity: 0.75; padding:40px 0px; } .brand .logo{ margin-bottom:15px; } .stores{ display:none; margin:16px 0px 25px 0px; padding:0px 6px; } .stores .app-icon{ display:inline-block; } @media only screen and (max-width: 425px){ .top-margin{ display:none; } .accordion-group{ padding:0px; margin:0px -15px; } .accordion-heading{ padding:5px 25px; background-color:#343434; } .accordion-heading .accordion-toggle{ padding:0px; } .accordion-group .accordion-body{ background-color:#8f8f8f; } .accordion-group .accordion-body ul{ padding:9px 0px 12px 40px; } .accordion-group .accordion-body ul li{ padding:0px 0px 5px 0px; margin-bottom:0px; } .brand .copyright{ display:none; } .brand-mobile{ display:block; } .brand .logo{ margin-bottom:25px; } .stores{ display:block; } }

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