<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 ----------> <link href="http://clubpenguinprograms.com/social/public/css/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="http://clubpenguinprograms.com/social/public/css/main3.css" rel="stylesheet"> <!-- FLAT UI CSS --> <link href="http://clubpenguinprograms.com/social/public/css/flat-ui.css" rel="stylesheet"> <input type="text" name="search-items" class="form-control" id="contact-list-search" placeholder="Search Items" autocomplete="off"> <ul class="list-group" id="contact-list"> <li class="list-group-item"> <div class="searchresults"> <div style=" margin: 5px; color: #a0a0a0; height: 80px; background-color: #f0f0f0; padding: 10px; border-radius: 5px; border: solid 2px #c5c5c5;"><div style="float: left;"><img src="http://clubpenguinprograms.com/items/byid.php?id=444" style="float:left;" width="50" height="50"> <b>Name</b>: 1st Year Party Hat<br><b>ID:</b> 444</div><div style="float: right;"><div class="alert alert-danger"> Not Available. </div></div> </div> <!-- JavaScrip Search Plugin --> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script> </div>

$(function () { /* BOOTSNIPP FULLSCREEN FIX */ $('[data-command="toggle-search"]').on('click', function(event) { event.preventDefault(); $(this).toggleClass('hide-search'); if ($(this).hasClass('hide-search')) { $('.c-search').closest('.row').slideUp(100); }else{ $('.c-search').closest('.row').slideDown(100); } }) $('#contact-list').searchable({ searchField: '#contact-list-search', selector: 'li', childSelector: '.searchresults', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });