How to filter items in html?

I have the following code in html

function FilterCard(filter) {
  event.preventDefault();
  var classList = document.getElementsByClassName("collapse");
  if (filter === 'All') {
    for (let i = 0; i < classList.length; i++) {
      classList[i].className = "collapse show";
      var childCards = classList[i].firstElementChild.children;
      for (let j = 0; j < childCards.length; j++) {
        childCards[j].style.display = "inline-flex";
      }
    }
  } else {
    for (let i = 0; i < classList.length; i++) {
      if (classList[i].className === "collapse show") {
        var childCards = classList[i].firstElementChild.children;
        console.log(childCards);
        var count = 0;
        for (let j = 0; j < childCards.length; j++) {
          var card = childCards[j].firstElementChild.firstElementChild;
          if (card.innerText !== filter) {
            childCards[j].style.display = "none";
            count++;
          } else {
            childCards[j].style.display = "inline-flex";
          }
        }
        if (count == childCards.length) {
          classList[i].className = "collapse";
        }
      }
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
  .card-body .card {
    margin: 5px;
    width: 18rem;
  }
  
  .card {
    display: inline-flex;
    margin: 5px;
    width: 100%;
  }
</style>
<div class="container-fluid text-center">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Filter Card
                </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <a class="dropdown-item" href="#" onclick="FilterCard('All')">All</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card1')">Card1</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card2')">Card2</a>
      <a class="dropdown-item" href="#" onclick="FilterCard('Card3')">Card3</a>
    </div>
  </div>
</div>
<div class="container">
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            Collapsible Group Item #1
                        </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card2</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                            Collapsible Group Item #2
                        </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card3</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                            Collapsible Group Item #3
                        </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse show" aria-labelledby="headingThree">
        <div class="card-body">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card1</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Card3</h5>
              <p class="card-text">Card Content Goes Here</p>
              <a href="#" class="card-link">Link1</a>
              <a href="#" class="card-link">Link2</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>

</html>

Now what I want to do is filter the cards based on it’s title i.e Card1 , Card2 and so on.
If the Collapsible Group is collapsed then the filter should not display the filtered content for that group.

For example if I have Collapsible Item #2 collapsed , and I select card3 as my filter , then I should only see Collapsible item 1 and 3 which contains only card3 visible if it has any , Collaspsible item#2 should remain collapsed.
If the expanded item , does not have that filter , than the item should automatically collapse.
How do I achieve this using Jquery or Javascript?

1 thought on “How to filter items in html?”

  1. you have modifed your html since the last time, i have worked on your first version.

    you have added a filter function in your html code, this piece of code does the same thing: (except for All)

    $("div.dropdown-menu .dropdown-item").on('click', function(){
      collapse($(this).text());
    });
    

    I have modified your code to generalize it: to hide an item, you have to remove the class show , but also add the class collapsed to the link button

    var cardsToHide=[];
    var obj=[];
    
    $("#dropdownMenuButton").on('click', function(){
      cardsToHide=[];obj=[];
      cardsToCollect();
      //console.log(obj);
    });
    $("div.dropdown-menu .dropdown-item").on('click', function(){
      collapse($(this).text());
    });
    
    
    function cardsToCollect(){
      $("button.btn-link[data-target^='#collapse']").each(function(){
        var o = {};
        var key = $(this).attr("data-target");
        o.hide = $(this).hasClass("collapsed") ? true : false;
        o[key]=[]; 
        $(this).closest('div[class="card"]').find('h5.card-title').each(function(){
         let v = $(this).text();
         o[key].push(v);
         if(o.hide && !cardsToHide.includes(v)) cardsToHide.push(v);
        });
        obj.push(o);    
      });
    }
    
    function collapse(txt){
      for(let i = 0; i < obj.length; i++){
        if(obj[i].hide)continue;
        let nameofKey = Object.keys(obj[i])[1];
    
        let re = new RegExp("^.+\\[");
        var json = JSON.stringify(obj[i]).replace(re, '');
    
        if(json.includes(txt))continue;
    
        $("button.btn-link[data-target='" + nameofKey + "']").addClass("collapsed");
        $(nameofKey).removeClass("show");   
      }//for i
    }
    <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
            <style>
                .card-body .card {
                    margin: 5px;
                    width: 18rem;
                }
                .card {
                    display: inline-flex;
                    margin: 5px;
                    width: 100%;
                }
            </style>
        </head>
        <body>
            <div class="container-fluid text-center">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Filter Card
                    </button>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                      <a class="dropdown-item" href="#">Card1</a>
                      <a class="dropdown-item" href="#">Card2</a>
                      <a class="dropdown-item" href="#">Card3</a>
                    </div>
                </div>
            </div>
            <div class="container">
                <div id="accordion">
                    <div class="card">
                        <div class="card-header" id="headingOne">
                            <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                Collapsible Group Item #1
                            </button>
                            </h5>
                        </div>
                  
                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Card1</h5>
                                      <p class="card-text">Card Content Goes Here</p>
                                      <a href="#" class="card-link">Link1</a>
                                      <a href="#" class="card-link">Link2</a>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Card2</h5>
                                      <p class="card-text">Card Content Goes Here</p>
                                      <a href="#" class="card-link">Link1</a>
                                      <a href="#" class="card-link">Link2</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingTwo">
                            <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Collapsible Group Item #2
                            </button>
                            </h5>
                        </div>
                        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo">
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Card3</h5>
                                      <p class="card-text">Card Content Goes Here</p>
                                      <a href="#" class="card-link">Link1</a>
                                      <a href="#" class="card-link">Link2</a>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Card1</h5>
                                      <p class="card-text">Card Content Goes Here</p>
                                      <a href="#" class="card-link">Link1</a>
                                      <a href="#" class="card-link">Link2</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingThree">
                            <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Collapsible Group Item #3
                            </button>
                            </h5>
                        </div>
                        <div id="collapseThree" class="collapse show" aria-labelledby="headingThree">
                            <div class="card-body">
                                <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Card1</h5>
                                      <p class="card-text">Card Content Goes Here</p>
                                      <a href="#" class="card-link">Link1</a>
                                      <a href="#" class="card-link">Link2</a>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-body">
                                      <h5 class="card-title">Card3</h5>
                                      <p class="card-text">Card Content Goes Here</p>
                                      <a href="#" class="card-link">Link1</a>
                                      <a href="#" class="card-link">Link2</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
        </body>
    </html>
    Reply

Leave a Comment