<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="col-lg-4 col-lg-offset-4"> <input type="search" id="container-search" value="" class="form-control" placeholder="Search..."> </div> <div id="searchable-container" class="row"> <div class="col-md-6"> <div class=" panel panel-default"> <div class="modal-body"> <div class="row"> <div class="col-xs-6 panel panel-default"> <div > <h4 class="control-label">Agent Daily/Monthly View</h4> </div> <div class="panel-body"> <p>This is an awesome view it includes metrics related to interactions. You can use this view to do great things like viewing the amount of interactions as well as viewing the durrations. This view is used regularly. </p> <ul> <li> Created by: Mmercadante </li> </ul> </div> </div> <div class="col-xs-4"> <div class="lead">Metrics in this View:<span class="text-success"> Active</span></div> <ul class="list-unstyled" style="line-height:2"> <li><span class="fa fa-check text-success"></span> InteractionDuration</li> <li><span class="fa fa-check text-success"></span> TotalInteractions</li> <li><span class="fa fa-check text-success"></span> Agent (key)</li> <li><span class="fa fa-check text-success"></span> Date (key)</li> <p><a href="/new-customer/" class="btn btn-info btn-block">Explore!</a></p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class=" panel panel-default"> <div class="modal-body"> <div class="row"> <div class="col-xs-6 panel panel-default"> <div > <h4 class="control-label">Complex Agent Daily View</h4> </div> <div class="panel-body"> <p>This is an awesome view it includes metrics related to interactions. You can use this view to do great things like viewing the amount of interactions as well as viewing the durrations. This view is used regularly. </p> <ul> <li> Created by: Mmercadante </li> </ul> </div> </div> <div class="col-xs-4"> <div class="lead">Metrics in this View:<span class="text-success"> Active</span></div> <ul class="list-unstyled" style="line-height:2"> <li><span class="fa fa-check text-success"></span> InteractionDuration</li> <li><span class="fa fa-check text-success"></span> TotalInteractions</li> <li><span class="fa fa-check text-success"></span> Agent (key)</li> <li><span class="fa fa-check text-success"></span> Date (key)</li> <p><a href="/new-customer/" class="btn btn-info btn-block">Explore!</a></p> </div> </div> </div> </div> </div> </div> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

$(function () { $( '#searchable-container' ).searchable({ searchField: '#container-search', selector: '.row', childSelector: '.col-xs-4', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });