<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container bg-light border pb-2"> <nav class="navbar navbar-light "> <form class="form-inline"> <input class="form-control mr-sm-2 srch" type="text" placeholder="Поиск"> </form> </nav> <div id="accordion" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="headingOne"> <span class="badge badge-primary badge-pill incat-count">0</span> <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Отдел КНО </a> </div> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> <div class="card-body p-0"> <ul class="list-group cat-list"> <li class="list-group-item">Иванов Петр Иванович</li> <li class="list-group-item">Петров Дмитрий Егорович</li> <li class="list-group-item">Сидорова Галина Олеговна</li> <li class="list-group-item">Масичкина Люблюка Зайковна</li> <li class="list-group-item">Галкин Максим Иванович</li> <li class="list-group-item">Егоров Роман Юрьевич</li> </ul> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <span class="badge badge-primary badge-pill incat-count">0</span> <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Отдел ФО </a> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-body p-0"> <ul class="list-group cat-list"> <li class="list-group-item">Юрьев Олег Петрович</li> <li class="list-group-item">Максимов Юрий Сидорович</li> <li class="list-group-item">Андреев Егор Анатольевич</li> <li class="list-group-item">Сергеев Иван Вадимович</li> <li class="list-group-item">Вадимов Анатолий Владимирович</li> <li class="list-group-item">Медвепутов Владимир Михайлович</li> </ul> </div> </div> </div> </div> </div>

$(document).ready(function(){ $('.cat-list li').addClass('fnd'); function counter_set() { $('.cat-list').each(function() { var cnt = $(this).children('.cat-list li.fnd').length; $(this).parent().parent().parent().find('.incat-count').text(cnt); }); } counter_set(); $('.srch').keyup(function(){ var txt = $(this).val().toLowerCase(); $('.cat-list li').filter(function(){ var mt = $(this).text().toLowerCase().indexOf(txt) > -1; $(this).toggle(mt); $(this).toggleClass('fnd', mt); }); counter_set(); }); });