<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<H3>Sample 1</h3>
<div class="panel panel-default">
<div class="panel-heading">
<H3 class="panel-title">Panel Title</h3>
<span class="pull-right toggle-help"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<ul class="list-group">
<li class="list-group-item">
Vet Appointment!
<span class="show-menu">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item success remove" data-effect="fadeOut"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item danger"><i class="glyphicon glyphicon-ok"></i></li>
</ul>
</li>
<li class="list-group-item">
Complete Project
<span class="show-menu">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item primary remove" data-effect="fadeOut"><span class="glyphicon glyphicon-remove"></span></li>
<li class="list-group-submenu-item warning"><i class="glyphicon glyphicon-ok"></i></li>
</ul>
</li>
<li class="list-group-item">
Grab a Beer with Friends.
<span class="show-menu">
<span class="glyphicon glyphicon-chevron-right"></span>
</span>
<ul class="list-group-submenu">
<li class="list-group-submenu-item remove" data-effect="fadeOut"><i class="glyphicon glyphicon-remove"></i></li>
<li class="list-group-submenu-item"><span class="glyphicon glyphicon-ok"></span></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-md-4">
<H3>Sample 2</h3>
<!--panel-->
<div class="panel panel-primary">
<div class="panel-heading">
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
</table>
</div>
<div class="panel-body">
<!--table-->
<table class="table table-condensed">
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<!--end of table-->
</div>
</div>
<!--end of panel-->
</div>
<!--end of row-->
</div>
<!--end of container-->
.panel-heading > .table, .panel-heading > .table th {
margin:0px;
border: 0px;
}
.toggle-help .glyphicon
{
background: rgba(0, 0, 0, 0.15);
display: inline-block;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.panel-heading span
{
margin-top: -23px;
font-size: 15px;
margin-right: -9px;
}
a.toggle-help { color: inherit; }
a.toggle-help:hover { text-decoration:none; }
.list-group {
overflow: hidden;
border-left: 1px solid rgb(221, 221, 221);
border-right: 1px solid rgb(221, 221, 221);
}
.list-group-item:first-child, .list-group-item:last-child {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
overflow: hidden;
}
.list-group-item {
border-left: 0px solid rgb(221, 221, 221);
border-right: 0px solid rgb(221, 221, 221);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-item > .show-menu {
position: absolute;
height: 100%; width:24px;
top: 0px; right: 0px;
background-color: rgba(51, 51, 51, 0.2);
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-item > .show-menu > span {
position: absolute;
top: 50%;
margin-top: -7px;
padding: 0px 5px;
}
.list-group-submenu {
position: absolute;
top: 0px;
right: -88px;
white-space: nowrap;
list-style: none;
padding-left: 0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.list-group-submenu .list-group-submenu-item {
float: right;
white-space: nowrap;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: rgb(51, 51, 51);
color: rgb(235, 235, 235);
cursor: pointer;
}
.list-group-item.open {
margin-left: -88px;
}
.list-group-item.open > .show-menu {
right: 88px;
}
.list-group-item.open .list-group-submenu{
right: 0px;
}
.list-group-submenu .list-group-submenu-item.primary {
color: rgb(255, 255, 255);
background-color: rgb(50, 118, 177);
}
.list-group-submenu .list-group-submenu-item.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
}
.list-group-submenu .list-group-submenu-item.info {
color: rgb(255, 255, 255);
background-color: rgb(57, 179, 215);
}
.list-group-submenu .list-group-submenu-item.warning {
color: rgb(255, 255, 255);
background-color: rgb(240, 173, 78);
}
.list-group-submenu .list-group-submenu-item.danger {
color: rgb(255, 255, 255);
background-color: rgb(217, 83, 79);
}
//inline subnav
$(function () {
$('.list-group-item > .show-menu').on('click', function(event) {
event.preventDefault();
$(this).closest('li').toggleClass('open');
});
});
//subnav: toggle portlet
$(document).on('click', '.panel span.toggle-help', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.list-group').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
} else {
$this.parents('.panel').find('.list-group').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
});
//subnav: remove panel
$(function(){
$('.remove').on('click',function(){
var effect = $(this).data('effect');
$(this).closest('.list-group-item')[effect]();
})
})
