Is there a way to filter DIVs containing cards based on their categories? I seem to be encountering an issue where the filtering only works with letters. I suspect the problem lies in the Javascript code, but I can't pinpoint it. Can you help me identify the issue?
I have set up 5 buttons with specific categories like 'a', 'b', 'c', and so on. To display only category 'A', I use data-cat="a" in the div tag. While this method works well when there is only a single letter inside the div, it fails when I include cards and images tagged with data-cat="a". Their visibility changes to "none" when I press the button to filter category A, resulting in only the letters being visible without the cards inside. If this explanation is unclear, please refer to the Live Preview:
My goal is to display the shopping card content when I click on a specific category.
<!--This one works-->
<div class="portfolio-item" data-cat="a">A</div> When I place another div with a card inside, it becomes invisible.
var Portfolio = {
sort: function (items) {
Portfolio.hideAll($('#portfolio-content *'));
Portfolio.showAll(items);
},
showAll: function (items) {
items.fadeIn(700);
},
hideAll: function (items) {
items.hide();
},
doSort: function () {
$('div', '.button-group').on('click', function () {
var $a = $(this);
if (!$a.is('#all')) {
var items = $('div[data-cat=' + $a.data('cat') + ']', '#portfolio-content');
Portfolio.sort(items);
} else {
var items = $('#portfolio-content *');
Portfolio.hideAll(items);
Portfolio.showAll(items);
}
});
}
};
Portfolio.doSort();