I'm building an accordion that can be searched through where hits are shown at keyup change. This is working pretty nicely so far, except i'm using panels to show the category, and i don't want the panel to dissapear when there are still hits in that same segment.
Here's what i have so far in JS thanks to codepen:
(function(){
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.expr[':'].containsCaseInsensitive = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#accordion_search_bar').on('change keyup paste click', function () {
searchTerm = $(this).val();
$('#accordion > .panel').each(function () {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
});
});
}());#accordion_search_bar_container {
position: relative;
}
#accordion_search_bar_container:after {
content: '\e003';
font-family: 'Glyphicons Halflings';
width: 18px;
height: 18px;
position: absolute;
right: 10px;
bottom: 10px;
}
#accordion_search_bar_container #accordion_search_bar {
display: block;
margin: 10px auto;
width: 100%;
padding: 7px 10px;
border: 1px solid #cacaca;
border-radius: 25px;
outline: 0;
}
.panel-title a {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section50" class="container-fluid">
<div class="container-fluid">
<div id="accordion_search_bar_container">
<input id="accordion_search_bar" placeholder="Zoeken..." type="search"> </div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info" id="collapse1_container">
<div class="panel-body" style="text-align: center;" id="category"> <b>**Category**</b></div>
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title"> <a role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse1" aria-expanded="true"
aria-controls="collapse1">Question</a> </h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Answer1</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse2_Container">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse2" aria-expanded="false"
aria-controls="collapse2">Question</a> </h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Answer2</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse3_Container">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse3" aria-expanded="false"
aria-controls="collapse3">Question</a> </h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<p>Answer3</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse4_Container">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse4" aria-expanded="false"
aria-controls="collapse4">Question</a> </h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<p>Answer4</p>
</div>
</div>
</div>
</div>In short: how do i make it so the panel (id="category") where i put the 'category' doesn't dissapear as long as there are hits in the same segement? I can't seem to get it to work.
Thanks in advance!
