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?
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)
I have modified your code to generalize it: to hide an item, you have to remove the class
show
, but also add the classcollapsed
to the link button