<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-sm-3 col-md-3"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Meus Pedidos<i class="fa fa-caret-down"></i></a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <table class="table"> <tr> <td> Todos pedidos </td> </tr> <tr> <td> <a href="#">Em produção</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Aguardando pagamento</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Aguardando arquivos</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Aguardando aprovação</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Arquivo com erros</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Em transporte</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Entregues</a> <span class="badge">999</span> </td> </tr> <tr> <td> <a href="#">Cancelados</a> <span class="badge">5</span> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Mensagens <span class="badge">1</span><i class="fa fa-caret-down"></i></a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Enviar mensagem</a> </td> </tr> <tr> <td> <a href="#">Enviadas</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Respondidas</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Resolvidas</a> <span class="badge">999</span> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Problema / Atraso no Pedido <span class="badge">1</span><i class="fa fa-caret-down"></i></a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Relatar problema</a> </td> </tr> <tr> <td> <a href="#">Problema enviado</a> <span class="badge">1</span> </td> </tr> <tr> <td> <a href="#">Resolvidos</a> <span class="badge">1</span> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">Notas Fiscais<i class="fa fa-caret-down"></i></a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Baixar notas fiscais</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFive">Meus Dados<i class="fa fa-caret-down"></i></a> </h4> </div> <div id="collapseFive" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Login e senha</a> </td> </tr> <tr> <td> <a href="#">Endereço cadastrado</a> </td> </tr> <tr> <td> <a href="#">Dados cadastrais</a> </td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseSix">Créditos no site<i class="fa fa-caret-down"></i></a> </h4> </div> <div id="collapseSix" class="panel-collapse collapse"> <div class="panel-body"> <table class="table"> <tr> <td> <a href="#">Saldo atual</a> </td> </tr> </table> </div> </div> </div> </div> </div> <div class="col-sm-9 col-md-9"> <div class="well"> Filtrar por status: <div class="wrap-select"> <div id="dd" class="wrapper-dropdown-3"> <span>Filtrar por status:</span> <ul class="dropdown"> <li><a href="#">Em produção</a></li> <li><a href="#">Aguardando pagamento</a></li> <li><a href="#">Aguardando arquivos</a></li> <li><a href="#">Aguardando aprovação</a></li> <li><a href="#">Arquivo com erros</a></li> <li><a href="#">Em transporte</a></li> <li><a href="#">Entregues</a></li> <li><a href="#">Cancelados</a></li> </ul> </div> </div> </div> </div> </div> </div>

body{margin-top:50px;} .glyphicon { margin-right:10px; } .panel-body { padding:0px; } .panel-body table tr td { padding-left: 15px } .panel-body .table {margin-bottom: 0px; } .wrapper-dropdown-3 { /* Size and position */ position: relative; width: 200px; margin: 0 auto; padding: 10px; /* Styles */ background: #fff; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(50,50,50,0.1); cursor: pointer; outline: none; } .wrapper-dropdown-3:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #000 transparent; } .wrapper-dropdown-3 .dropdown { /* Size & position */ position: absolute; top: 100%; left: 0; right: 0; padding:0; margin:0; /* Styles */ background: white; border: 1px solid rgba(0,0,0,0.17); font-weight: normal; -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; } /*.wrapper-dropdown-3 .dropdown:after { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; right: 15px; border-width: 0 6px 6px 6px; border-style: solid; border-color: #fff transparent; } .wrapper-dropdown-3 .dropdown:before { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; right: 13px; border-width: 0 8px 8px 8px; border-style: solid; border-color: rgba(0,0,0,0.1) transparent; }*/ .wrapper-dropdown-3 .dropdown li a { display: block; padding: 10px; text-decoration: none; color: #000; border-bottom: 1px solid #e6e8ea; box-shadow: inset 0 1px 0 rgba(255,255,255,1); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .wrapper-dropdown-3 .dropdown li i { float: right; color: inherit; } .wrapper-dropdown-3 .dropdown li:first-of-type a { border-radius: 7px 7px 0 0; } .wrapper-dropdown-3 .dropdown li:last-of-type a { border: none; border-radius: 0 0 7px 7px; } /* Hover state */ .wrapper-dropdown-3 .dropdown li:hover a { background: #f3f8f8; } /* Active state */ .wrapper-dropdown-3.active .dropdown { opacity: 1; pointer-events: auto; } /* No CSS3 support */ .no-opacity .wrapper-dropdown-3 .dropdown, .no-pointerevents .wrapper-dropdown-3 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-3.active .dropdown, .no-pointerevents .wrapper-dropdown-3.active .dropdown { display: block; } /*#############################*/

function DropDown(el) { this.dd = el; this.placeholder = this.dd.children('span'); this.opts = this.dd.find('.dropdown a'); this.val = ''; this.index = -1; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); obj.opts.on('click',function(){ var opt = $(this); obj.val = opt.text(); obj.index = opt.index(); obj.placeholder.text(obj.val); }); }, getValue : function() { return this.val; }, getIndex : function() { return this.index; } } $(function() { var dd = new DropDown( $('#dd') ); });