.removeClass () не работает при фильтрованном поиске и при разбиении на страницы

Question

Я создаю аккордеон с фильтрованным поиском и алфавитной нумерацией страниц.

Аккордеон состоит из свернутых карт. Когда пользователь вводит в поле поиска, я хочу, чтобы карточки открывались .removeClass('collapsed'), и я хочу, чтобы такое же поведение было, когда пользователь выбирает букву из нумерации страниц.

.removeClass() в этом случае не работает для некоторая причина.

Есть ли другой подход, который я могу использовать? Я что-то не так делаю?

Может кто-нибудь здесь посоветовать мне, как я могу развернуть cards, когда пользователь вводит текст в поле поиска или нажимает букву в нумерации страниц?

$(document).ready(function() {
  $("#alphf .acco").each(function() {
    $(this).on("click", function() {
      var cat = $(this).data('cat-type');
      var nam = $(this).data('cat-name');
      if (cat != 0) {
        $('#Categories > .acc-row').hide();
        $('#Categories > .acc-row[data-cat-type="' + cat + '"][data-cat-name="' + nam + '"]').show();
      }
    });
  });

  $("#search").on("keyup", function(e) {
    $('button').removeClass('collapsed');

    var value = $(this).val().toLowerCase();
    $('.acc-row').filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<div class="container">
  <nav>
    <ul class="pagination" id="alphf">
      <!-- <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> -->
      <li><a class="acco" href="#" data-cat-name="A" data-cat-type="A">A</a></li>
      <li><a class="acco" href="#" data-cat-name="B" data-cat-type="B">B</a></li>
      <li><a class="acco" href="#" data-cat-name="C" data-cat-type="C">C</a></li>
      <li><a class="acco" href="#" data-cat-name="D" data-cat-type="D">D</a></li>
      <li><a class="acco" href="#" data-cat-name="E" data-cat-type="E">E</a></li>
      <li><a class="acco" href="#" data-cat-name="F" data-cat-type="F">F</a></li>
      <li><a class="acco" href="#" data-cat-name="G" data-cat-type="G">G</a></li>
      <li><a class="acco" href="#" data-cat-name="H" data-cat-type="H">H</a></li>
      <li><a class="acco" href="#" data-cat-name="I" data-cat-type="I">I</a></li>
      <li><a class="acco" href="#" data-cat-name="J" data-cat-type="J">J</a></li>
      <li><a class="acco" href="#" data-cat-name="K" data-cat-type="K">K</a></li>
      <li><a class="acco" href="#" data-cat-name="L" data-cat-type="L">L</a></li>
      <li><a class="acco" href="#" data-cat-name="M" data-cat-type="M">M</a></li>
      <li><a href="#">N</a></li>
      <li><a href="#">O</a></li>
      <li><a href="#">P</a></li>
      <li><a href="#">R</a></li>
      <li><a href="#">S</a></li>
      <li><a href="#">T</a></li>
      <li><a href="#">U</a></li>
      <li><a href="#">V</a></li>
      <li><a href="#">X</a></li>
      <li><a href="#">Y</a></li>
      <li><a href="#">Z</a></li>
      <!-- <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li> -->
    </ul>
  </nav>
  <div class="accordion accordian-wrapper" id="accordionStaff">
    Search: <input id="search" type="text">

    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
      <h5 class="accordian-title">  Department one </h5>
      </button>
        </h2>
      </div>
      <div id="name-cats">
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne">
          <div class="card-body" id="Categories">
            <div class="row acc-row" data-cat-type="A" data-cat-name="A">
              <div class="col-md-3">
                <p>Aston</p>
              </div>
              <div class="col-md-4">
                <p>Tracker</p>
              </div>
              <div class="col-md-3">
                <p>aston@some.com </p>
              </div>
              <div class="col-md-2">
                <p>Phone:: 1234567890</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="A" data-cat-name="A">
              <div class="col-md-3">
                <p data-cat-type="A">Arleen</p>
              </div>
              <div class="col-md-4">
                <p>Specialist</p>
              </div>
              <div class="col-md-3">
                <p>arleen@firm.is</p>
              </div>
              <div class="col-md-2">
                <p>phone 1239484999</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="J" data-cat-name="J">
              <div class="col-md-3">
                <p data-cat-type="J">John</p>
              </div>
              <div class="col-md-4">
                <p>Registar</p>
              </div>
              <div class="col-md-3">
                <p>jj@arn.com </p>
              </div>
              <div class="col-md-2">
                <p> 1234565469</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="K" data-cat-name="K">
              <div class="col-md-3">
                <p data-cat-type="K">Kyle
                </p>
              </div>
              <div class="col-md-4">
                <p>Driver
                </p>
              </div>
              <div class="col-md-3">
                <p>kdrive@company.com
                </p>
              </div>
              <div class="col-md-2">
                <p> 1234567890
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
        <h5 class="accordian-title">   DepartmentTwo</h5>
      </button>
        </h2>
      </div>
      <div id="name-cats">
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
          <div class="card-body" id="Categories">
            <div class="row acc-row" data-cat-type="A" data-cat-name="A">
              <div class="col-md-3">
                <p id="staff_name" data-cat-type="A">Allan</p>
              </div>
              <div class="col-md-4">
                <p>Specialist</p>
              </div>
              <div class="col-md-3">
                <p>allan@lsome.com </p>
              </div>
              <div class="col-md-2">
                <p>Phone: 1234567890</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="B" data-cat-name="B">
              <div class="col-md-3">
                <p id="staff_name" data-cat-type="B">Brad</p>
              </div>
              <div class="col-md-4">
                <p>IT-Guy</p>
              </div>
              <div class="col-md-3">
                <p>brad@some.com </p>
              </div>
              <div class="col-md-2">
                <p> 1234567890 </p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="B" data-cat-name="B">
              <div class="col-md-3">
                <p>Brent</p>
              </div>
              <div class="col-md-4">
                <p>Specialist</p>
              </div>
              <div class="col-md-3">
                <p>brent@some.com </p>
              </div>
              <div class="col-md-2">
                <p>123456789</p>
              </div>
            </div>
            <div class="row acc-row" data-cat-type="E" data-cat-name="E">
              <div class="col-md-3">
                <p>Evan</p>
              </div>
              <div class="col-md-4">
                <p>Chef</p>
              </div>
              <div class="col-md-3">
                <p>evan@some.com </p>
              </div>
              <div class="col-md-2">
                <p>123456789</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

вот ссылка на скрипку

Answer 1

нужно убрать свернуть не свернуто. попробуйте это

 $(document).ready(function() {       $("#alphf .acco").each(function() {
        $(this).on("click", function() {
          var cat = $(this).data('cat-type');
          var nam = $(this).data('cat-name');
          if (cat != 0) {
            $('#Categories > .acc-row').hide();
            $('#Categories > .acc-row[data-cat-type="' + cat + '"][data-cat-name="' + nam + '"]').show();
          }
        });       });

      $("#search").on("keyup", function(e) {
        $('#collapseOne, #collapseTwo').removeClass('collapse');

        var value = $(this).val().toLowerCase();
        $('.acc-row').filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });       
     });    
 });