I have a situation where I need to dynamically adjust the position of elements within a container based on a filter selection. Currently, the filter is working correctly but when elements are hidden, it leaves empty spaces in the layout. I would like to reposition the visible items within the container so that they are always at the beginning, allowing me to style them using CSS selectors like :first-of-type, :nth-of-type(2), and so on.
Here is the code snippet:
$(".trigger-filter").click(function() {
var filterData = $(this).attr("data-filter");
if (filterData == "all") {
$(".team").show("2000");
} else {
$(".team").not("." + filterData).hide("2000");
$(".team").filter("." + filterData).show("2000");
}
});
HTML:
<div class="team-filters">
<div class="trigger-filter" data-filter="tarya-fintech">
<img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-610.png">
</div>
...
<div class="trigger-filter" data-filter="all">
<img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-72222222.png">
</div>
</div>
<div class="team-body">
...
// Team members with different categories and images
...
</div>
CSS:
.team-body {
position: relative;
}
// Styling for team filters icons
// Positioning rules for each category of team member
...
If you have any suggestions on how to achieve this dynamic repositioning, please share!