<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 ----------> <div class="panel-group" id="accordion"> <div class="panel-heading"> <div data-toggle="collapse" data-parent="#accordion" href=""> <ul id="tabs" class="nav nav-pills" data-collapse-toggle="collapseOne" data-tabs="tabs"> <li><a type="button" class="btn btn-danger btn-circle btn-xl" href="#date1" data-toggle="tab"><p class="weekday">Today</p><p class="monthday">23</p></a></li> <li><a type="button" class="btn btn-danger btn-circle btn-xl" href="#date2" data-toggle="tab"><p class="weekday">Sat</p><p class="monthday">23</p></a></li> <li><a type="button" class="btn btn-danger btn-circle btn-xl" href="#date3" data-toggle="tab"><p class="weekday">Sun</p><p class="monthday">24</p></a></li> <li><a type="button" class="btn btn-danger btn-circle btn-xl" href="#date4" data-toggle="tab"><p class="weekday">Mon</p><p class="monthday">25</p></a></li> <li><a type="button" class="btn btn-danger btn-circle btn-xl" href="#date5" data-toggle="tab"><p class="weekday">Tue</p><p class="monthday">24</p></a></li> </ul> </div> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div id="my-tab-content" class="tab-content"> <div class="tab-pane" id="date1"> <h1>Red</h1> <p>red red red red red red</p> </div> <div class="tab-pane active" id="date2"> <h1>Orange</h1> <p>orange orange orange orange orange</p> </div> <div class="tab-pane" id="date3"> <h1>Yellow</h1> <p>yellow yellow yellow yellow yellow</p> </div> <div class="tab-pane" id="date4"> <h1>Green</h1> <p>green green green green green</p> </div> <div class="tab-pane" id="date5"> <h1>Blue</h1> <p>blue blue blue blue blue</p> </div> </div> </div> </div> </div>

body{margin:40px;} .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-lg { width: 50px; height: 50px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 25px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; } .weekday { font-size:small; margin-bottom: 0; } .monthday { margin-top: 0px; } /* CSS used here will be applied after bootstrap.css */ .panel-default { border: 0px; } .panel { border: 0px solid transparent; */ border-radius: 0px; -webkit-box-shadow: 0 0 0; box-shadow: 0; } .nav-pills li a{ background-color: #ff3366; } .nav-pills li a:hover, .nav-pills li a:focus, .nav-pills li.active a, .nav-pills li.active a:focus{ background-color: #ff254a; }

$('#accordion .panel-heading ul li').click(function(){ var target = $('#' + $(this).parent().data('collapse-toggle')); $("#accordion .panel-heading ul li").not($(this)).removeClass('active'); if ($(this).hasClass('active')) { target.collapse('toggle'); } else { target.collapse({toggle:false}); target.collapse('show'); } });