Isotope hide on click

Question

My site has all elements displayed by default.

Isotope has the inbuilt method 'filter' - ie show ONLY this.

I'd like to make a function where I hide/show an element based on clicking on a button on screen - ie hide ONLY this (and show the others) / unhide this (and show the others).

Here's what I'm doing code-wise.

var music = $('#music').isotope();

$('nav button').on('click', function () {

    music.isotope({

        filter: "div." + $(this).attr("class")
    });

can you provide some HTML markup so we can see what's going on? — Shannon Hochkins, Sep 03 '13 at 00:13

Shannon Hochkins · Accepted Answer · 2013-09-03T00:39:31.520

With filtering, the filter parameter must match items in your HTML markup, if not the filter will not return anything.

FIDDLE DEMO: http://jsfiddle.net/XWVhc/1/

I can only provide an alternate example as you have not provided any html markup so that we could debug your current code, however, I'll explain how this works.

HTML FOR FILTERS:

Here we have a few simple buttons that will filter our items with the data-filter attribute attached to each button.

<div id="filter-buttons-holder">
    <div class="filter-button" data-filter=".dog">DOG</div>
    <div class="filter-button" data-filter=".cat">CAT</div>
    <div class="filter-button" data-filter=".foo">FOO</div>
    <div class="filter-button" data-filter=".bar">BAR</div>
    <div class="filter-button selected" data-filter=".dog, .foo, .cat, .bar">SHOW ALL</div>
</div>

HTML FOR ISOTOPE ITEMS:

Here's the markup for our isotope items, notice that each item has a class of isotope-item and also has a class of what 'category' it belongs too, you can add multiple classes and it will still filter as expected.

<div id="module-columns-holder" class="isotope"> 
    <a href="/" class="dog isotope-item"> 
        <div><h1>DOG</h1></div> 
    </a>  
        <a href="/" class="cat foo isotope-item"> 
        <div><h1>CAT</h1></div> 
    </a>  
    <a href="/" class="dog isotope-item"> 
        <div><h1>DOG</h1></div> 
    </a>  
    <a href="/" class="foo isotope-item"> 
        <div><h1>FOO</h1></div> 
    </a>  
    <a href="/" class="bar isotope-item"> 
        <div><h1>BAR</h1></div> 
    </a>  
</div>

JAVASCRIPT FILTERING

Here we set up our isotope container, notice the last data attribute is a filter, this is effectively what you're after, however you can specify which 'category' you want to filter on initially.

//Setup isotope for filters
var isotopeContainer = $('#module-columns-holder');
isotopeContainer.isotope({
    itemSelector: '.isotope-item',
    layoutMode : 'fitRows',
    animationOptions : {
        queue : false,
        duration : 750,
        easing: 'linear'
    },
    filter: '.dog, .cat, .foo, .bar'
});

CLICK EVENT FOR FILTERS

You can attach a filter to the buttons we created earlier so that you can have live filtering

    $('#filter-buttons-holder .filter-button').on('click',function(){
        var filters = $(this).data('filter');
        var parent = $(this).closest('#filter-buttons-holder');
        parent.find('.selected').removeClass('selected');
        $(this).addClass('selected');
        isotopeContainer.isotope({ filter: filters });
        return false;
    });

Hope this helps

Isotope hide on click

1 Answers1