"Collapsible Panel"
Bootstrap 3.1.0 Snippet by ccela

Post to Facebook Tweet this

<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 ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Filtro Busqueda</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body">Filtros</div> </div> </div> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Ordenes de Compra</h3> <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span> </div> <div class="panel-body"> <div class="pull-right"> <div class="btn-group"> <button name="btnprogramado" type="button" class="btn btn-success btn-filter" data-target="programado">Programado</button> <button type="button" class="btn btn-warning btn-filter" data-target="aprobado">Aprobado</button> <button type="button" class="btn btn-danger btn-filter" data-target="espera">Lista de Espera</button> <button type="button" class="btn btn-default btn-filter" data-target="all">Todos</button> </div> </div> <div class="table-container"> <table class="table table-filter"> <tbody> <thead> <tr data-status="cabprogramado"> <th></th> <th>Tipo</th> <th>Orden</th> <th>Proveedor</th> <th>Producto</th> <th>Total</th> <th>Libras</th> <th>Gramaje</th> <th>Color</th> </tr> </thead> <tr data-status="programado"> <td> <div class="ckbox"> <input type="checkbox" id="checkbox3"> <label for="checkbox3"></label> </div> </td> <td> <div class="media"> <div class="media-body"> Noche </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba </div> </div> </td> </tr> <tr data-status="aprobado"> <td> <!--<div class="ckbox"> <input type="checkbox" id="checkbox1" disabled readonly> <label for="checkbox1"></label> </div>--> </td> <td> <div class="media"> <div class="media-body"> Noche </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba2 </div> </div> </td> </tr> <tr data-status="espera"> <td> <!--<div class="ckbox"> <input type="checkbox" id="checkbox1" disabled readonly> <label for="checkbox1"></label> </div>--> </td> <td> <div class="media"> <div class="media-body"> Noche </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> <td> <div class="media"> <div class="media-body"> prueba3 </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>
.row{ margin-top:40px; padding: 0 10px; } .clickable{ cursor: pointer; } .panel-heading span { margin-top: -20px; font-size: 15px; } /* -------------------------------------------------- :: General -------------------------------------------------- */ body { font-family: 'Open Sans', sans-serif; color: #353535; } .content h1 { text-align: center; } .content .content-footer p { color: #6d6d6d; font-size: 12px; text-align: center; } .content .content-footer p a { color: inherit; font-weight: bold; } /* -------------------------------------------------- :: Table Filter -------------------------------------------------- */ .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .panel .btn-group { margin: 15px 0 30px; } .panel .btn-group .btn { transition: background-color .3s ease; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { padding: 10px; vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .ckbox { position: relative; } .ckbox input[type="checkbox"] { opacity: 0; } .ckbox label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ckbox label:before { content: ''; top: 1px; left: 0; width: 18px; height: 18px; display: block; position: absolute; border-radius: 2px; border: 1px solid #bbb; background-color: #fff; } .ckbox input[type="checkbox"]:checked + label:before { border-color: #2BBCDE; background-color: #2BBCDE; } .ckbox input[type="checkbox"]:checked + label:after { top: 3px; left: 3.5px; content: '\e013'; color: #fff; font-size: 11px; font-family: 'Glyphicons Halflings'; position: absolute; } /*texto*/ .txbox { position: relative; } .txbox input[type="textbox"] { opacity: 0; } .txbox label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .txbox label:before { content: ''; top: 1px; left: 0; width: 18px; height: 18px; display: block; position: absolute; border-radius: 2px; border: 1px solid #bbb; background-color: #fff; } .txbox input[type="textbox"]:checked + label:before { border-color: #2BBCDE; background-color: #2BBCDE; } .txbox input[type="textbox"]:checked + label:after { top: 3px; left: 3.5px; content: '\e013'; color: #fff; font-size: 11px; font-family: 'Glyphicons Halflings'; position: absolute; } /*****************************************************/ .table-filter .star { color: #ccc; text-align: center; display: block; } .table-filter .star.star-checked { color: #F0AD4E; } .table-filter .star:hover { color: #ccc; } .table-filter .star.star-checked:hover { color: #F0AD4E; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */ } .table-filter .media-meta { font-size: 11px; color: #999; } .table-filter .media .title { color: #2BBCDE; font-size: 14px; font-weight: bold; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.programado { color: #5cb85c; } .table-filter .media .title span.aprobado { color: #f0ad4e; } .table-filter .media .title span.espera { color: #d9534f; } .table-filter .media .summary { font-size: 14px; }
$(document).on('click', '.panel-heading span.clickable', function(e){ var $this = $(this); if(!$this.hasClass('panel-collapsed')) { $this.parents('.panel').find('.panel-body').slideUp(); $this.addClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down'); } else { $this.parents('.panel').find('.panel-body').slideDown(); $this.removeClass('panel-collapsed'); $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up'); } }) $(document).ready(function () { $('.star').on('click', function () { $(this).toggleClass('star-checked'); }); $('.ckbox label').on('click', function () { $(this).parents('tr').toggleClass('selected'); }); $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('.table tr').css('display', 'none'); $('.table tr[data-status="cabprogramado"]').fadeIn('slow'); $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('.table tr').css('display', 'none').fadeIn('slow'); } }); });

Questions / Comments: