'Auto rearrange .show cards (in a portfolio) jQuery CSS html
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 class="banner" style="background: linear-gradient(to bottom right,hsl(0, 100%, 2%),white); width: auto; padding: 100px 0 200px;">
<section id="portfolio" class="portfolio">
<div class="row aos-int aos-animate" data-aos="fade-up" data-aos-delay="100">
<div class="col-lg-12 d-flex justify content-center">
<div class="empty " style="width: auto; margin-top: 80px;">
</div>
<div id="myBtnContainer" style= " margin-top:-200px ;margin: auto ; align-items: center;">
<button class="all button-33 active" role="button" ; onclick="fb1">All</button>
<button class="booksB button-33" role="button" onclick="fb2">Books</button>
<button class="articlesB button-33" role="button" ; onclick="fb3">Articles</button>
</div>
</div>
</div>
</section>
<div class="container" >
<div class="row "style="margin: auto; align-items: center;">
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all books">
<div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Albert Einstein - Drops on the Ocean</h5>
<p class="card-text">Biography <br> <br>
Publisher: Sanhinda Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all books">
<div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
<img src="img/book05268.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Asandimiththa -translation</h5>
<p class="card-text">Biography <br> <br>
Publisher: Sarasavi Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all articles">
<div class="card shadow bg-light mb-3 filterDiv " style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Article 01</h5>
<p class="card-text">Biography <br> <br>
Mora Spirit
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all articles">
<div class="card shadow bg-light mb-3 filterDiv " style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Article 02</h5>
<p class="card-text">Biography <br> <br>
Mora Spirit
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all articles">
<div class="card shadow bg-light mb-3 filterDiv " style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Article 04</h5>
<p class="card-text">Biography <br> <br>
Mora spirit
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all books">
<div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Book 03</h5>
<p class="card-text">Biography <br> <br>
Publisher: Sarasavi
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all articles">
<div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Article 06</h5>
<p class="card-text">Biography <br> <br>
Sunday Observer
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
</div>
</section>
plz help me guys
Solution 1:[1]
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 class="col-lg-3 col-md-6 portfolio-item " style="justify-content: center;" >
<div class="all books">
<div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Albert Einstein - Drops on the Ocean</h5>
<p class="card-text">Biography <br> <br>
Publisher: Sanhinda Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
To This
<div class="col-lg-3 col-md-6 portfolio-item all books" style="justify-content: center;" >
<div>
<div class="card shadow bg-light mb-3 filterDiv book" style="max-width: 18rem;">
<img src="img/bookRZ.jpg" class="card-img-top embed-responsive embed-responsive-4by3" alt="Drops of Ocean">
<div class="card-body">
<h5 class="card-title">Albert Einstein - Drops on the Ocean</h5>
<p class="card-text">Biography <br> <br>
Publisher: Sanhinda Publishers
</p>
<a href="https://www.daraz.lk/products/albert-einstein-sindu-matha-bindu-i122874161.html" class="btn btn-primary">Buy Online</a>
</div>
</div>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ruleboy21 |