Bootstrap 3.0 - Collapsable Panels
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="panel-group" id="accordion">
<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
<div id="event-title" class="panel-heading heading-event">
<h4 class="panel-title">test
<button type="button" id="7" onclick="checkinEvent(this)"
class="checkin-btn btn btn-xs btn-danger glyphicon glyphicon-plus disabled">Checked in
</button>
<span class="label label-default badge-round pull-right">1 </span></h4>
</div>
<div id="collapse0" class="panel-collapse collapse">
<div class="panel-body">
<div><p><strong>tesst</strong></p>
</div>
<div><span class="label label-default">Entries open date</span> <strong>15-9-2015 02:50 </strong></div>
<div><span class="label label-default">close date</span><strong>15-9-2015 02:45 </strong></div>
<div><span class="label label-success">Start Date</span> <strong>22-9-2015 01:45 </strong><span
class="label label-danger">End Date</span><strong>15-9-2015 09:25 </strong></div>
<p></p>
<div>
<button id="7" data-toggle="modal" data-target="#myModal" type="button"
class="btn btn-danger btn-sm location-btn center-block"><span
class="glyphicon glyphicon-map-marker"></span>56 Pitt Street, Sydney, New South Wales,
Australia
</button>
</div>
</div>
</div>
</div>
<div data-toggle="collapse"...
CSS
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
.panel-heading a:after {
/*font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;*/
}
.panel-heading a.collapsed:after {
content:"\e080";
}
.badge-round {
border-radius: .7em;
color:#fff;
}
.panel-title > a{
color:#666;
cursor: default;
text-decoration: none;
}
.panel-style{
border-color: #E66060;
}
div#notification-container {
position: relative;
width: 16px;
height: 16px;
}
.notification-counter {
position: absolute;
left: 55%;
top: -20%;
background-color: rgba(217, 83, 79, 1);
color: #fff;
border-radius: 3px;
padding: 1px 3px;
font: 8px Verdana;
}
.checkin-btn {
position: absolute;
right: 35px;
font-size: 12px;
margin-top: -4px;
}
.location-btn {
font-size: 12px;
color: #d43f3a;
background-color: #fff;
border-color: #d43f3a;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
#event-app {
font-size: 12px;
}
#event-title h4{
font-size: 14px;
position: relative;
}
#event-row {
margin-right: -10px;
margin-left: -10px;
}
.heading-event {
padding: 8px 15px 5px 20px;
}