I wanted to make a portfolio with card filter effect (to show only relevant cards to a selected category when click a button and to hide other none relevant cards) For that I categorized cards in to 2 categories(classes) as books and articles.
when I click the button "articles" the .show cards are remaining in their original place in the grid (UI) and .hide cards spaces in the UI looks blank rather than re arranging .show cards to fill the gaps.
So need to make show cards to auto arrange without showing empty spaces in (UI).
when click the button "articles"
<script>
$(document).ready(function(){
$(".all").click(function(){
$(".all").show();
});
$(".booksB").click(function(){
$(".books").show();$(".articles").hide()
});
$(".articlesB").click(function(){
$(".books").hide();$(".articles").show()
});
});
Html codes
<section style="background: linear-gradient(to bottom right,hsl(0, 100%, 2%),white); width: auto; padding: 100px 0 200px;">
<section id="portfolio" >
<div data-aos="fade-up" data-aos-delay="100">
<div >
<div style="width: auto; margin-top: 80px;">
</div>
<div id="myBtnContainer" style= " margin-top:-200px ;margin: auto ; align-items: center;">
<button role="button" ; onclick="fb1">All</button>
<button role="button" onclick="fb2">Books</button>
<button role="button" ; onclick="fb3">Articles</button>
</div>
</div>
</div>
</section>
<div >
<div style="margin: auto; align-items: center;">
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Albert Einstein - Drops on the Ocean</h5>
<p >Biography <br> <br>
Publisher: Sanhinda Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/book05268.jpg" alt="Drops of Ocean">
<div >
<h5 >Asandimiththa -translation</h5>
<p >Biography <br> <br>
Publisher: Sarasavi Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Article 01</h5>
<p >Biography <br> <br>
Mora Spirit
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Article 02</h5>
<p >Biography <br> <br>
Mora Spirit
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Article 04</h5>
<p >Biography <br> <br>
Mora spirit
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Book 03</h5>
<p >Biography <br> <br>
Publisher: Sarasavi
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Article 06</h5>
<p >Biography <br> <br>
Sunday Observer
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
</div>
</section>
plz help me guys
CodePudding user response：
The JavaScript part is okay but you've added the target classes to the wrong elements. You should add the classes that you're targeting (.all, .books, .articles) to the .portfolio-item element instead.
Example: Change
<div style="justify-content: center;" >
<div >
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Albert Einstein - Drops on the Ocean</h5>
<p >Biography <br> <br>
Publisher: Sanhinda Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>
To This
<div style="justify-content: center;" >
<div>
<div style="max-width: 18rem;">
<img src="img/bookRZ.jpg" alt="Drops of Ocean">
<div >
<h5 >Albert Einstein - Drops on the Ocean</h5>
<p >Biography <br> <br>
Publisher: Sanhinda Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" >Buy Online</a>
</div>
</div>
</div>
</div>