CODEWITHSUNDEEP
javascriptjqueryjquery-isotope
timmyg
timmyg

Reputation: 181

Hide Grouped Isotope Elements Headings

Using isotope to filter, and each element is within a specific group. Each element's group headings stack on top of another when filtering, and I'm not sure the best way to hide the titles when they're not active/selected.

Each element is .person, but the headings also have .sub-head class. Is there a way to append .sub-head to itemSelector? Or add another var to filter?

My js code:

//***********DIRECTORY SCRIPTS***********
var $j = jQuery.noConflict();
$j('#directory').imagesLoaded( function() {

   var $container = $j('#directory');
   filters = {};

   $container.isotope({
        itemSelector: '.person',
        layoutMode : 'fitRows'
    });

    $j('.filter .button a').click(function(){
      var $this = $j(this);

      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter');

      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });
});

Below is a screenshot that shows how 'Research Faculty' is selected and the appropriate elements appear. But how can I hide the other headings?

screenshot

[Note: I am using this with php and WordPress queries, but think it's a js issue. I can share full source code if need be; didn't want to just dump it all here]

Upvotes: 0

Views: 281

Answers (1)

wonderbell
wonderbell

Reputation: 1126

You are already selecting the elements to remove class '.selected' from headings.

var $optionSet = $this.parents('.option-set');

      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

Now, only current heading has '.selected' class, so you can hide all option set except the one which has this class

$optionSet.not('.selected').hide();

Upvotes: 0

Related Questions