CODEWITHSUNDEEP
javascriptjqueryhidejquery-isotope
Diogo Bento
Diogo Bento

Reputation: 75

How to hide title of two different groups of Isotope elements

I'm working with Isotope to filter two different groups of elements (National and International categories), with both buttons and search.

On top of each group of elements I've got a title of each category.

How can I hide the title if all the elements under it's category are hidden (each filtered elements gets a display: none; property)?

For example, if all of the "International" elements get filtered (either by search or button) I also want to hide the div element with the title "International".

Here's a CodePen with my code: https://codepen.io/koiastudio/pen/KrYMWm

Not sure what is the best approach.

Thank you.

Upvotes: 0

Views: 185

Answers (1)

Diogo Bento
Diogo Bento

Reputation: 75

See updated CodePen for solution

// Hide or show categories titles based on articles visibility
function projects_title() {
    var $title = $('.projects-title');
    $title.each(function() {
        var $this = $(this);
        if($this.next('.entry-content').find('article:visible').length) {
            $this.css('display', 'block');
        } else {
            $this.css('display', 'none');
        }
    });
}

$grid_projects.on( 'arrangeComplete', function( event, filteredItems ) {
    projects_title();
});

Upvotes: 1

Related Questions