Bootstrap Snippet My Filter for list in collapse card using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$(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();
  });
 
    
    
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"My Filter for list in collapse card"
Bootstrap 4.1.1 Snippet by GreenSneakers

Related: See More

Questions / Comments:

"My Filter for list in collapse card" Bootstrap 4.1.1 Snippet by GreenSneakers

Related: See More

Questions / Comments:

"My Filter for list in collapse card"
Bootstrap 4.1.1 Snippet by GreenSneakers