"Multipurpose Panels (DRAFT!)"
Bootstrap 3.2.0 Snippet by frankis

<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](); }) })

Related: See More


Questions / Comments: