How to filter items in html?

by

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