JSFiddle - React, Tailwind, and code Playground
HTML
<form id="live-search" action="" class="styled" method="post">
<fieldset> Filter:
<input type="text" class="text-input" id="filter" value="" />
</fieldset>
</form>
<div class="panel panel-default ">
<div class="panel-heading bloque-web">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
Title
</a>
</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default ">
<div class="panel-heading bloque-web">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent=".accordion" href="#collapseTwo">
Title
</a>
</h3>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Four</li>
<li class="list-group-item">Five</li>
</ul>
</div>
</div>
</div>
CSS
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-color: #ddd;
}
.panel.hidden {
display:none;
}
JavaScript
$(document).ready(function(){
$("#filter").bind('change keyup keydown',function(){
var filter = $(this).val(), count = 0;
$(".list-group-item").each(function(){
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut(500,function(){
if (allChildrenNotVisble($(this).parent())){
$(this).parents('.panel').addClass('hidden');
}
});
}
else {
$(this).show();
$(this).parents('.panel').removeClass('hidden');
count++;
}
});
});
});
function allChildrenNotVisble(el){
var result = true;
el.children().each(function(){
if($(this).is(':visible')){
result = false;
}
});
return result;
}