jquery - Isotope filter not showing/hiding specific classes -

i have spent many hours on trying work , have no luck.

i followed documentation here: http://isotope.metafizzy.co/filtering.html

so want show has class 'box' , hide else. added line of code js:

$('.items').isotope({     itemselector: '.box',     filter: '.box'  }); 

i have tried other js lines of code, including one:

$container.isotope({     filter: '.box' }); 

none of them seem work.

here (partial) html:

<div class="metro-layout vertical">     <div class="header">         <h1>my street life</h1>         <div class="controls">             <span class="down" title="scroll down"></span>             <span class="up" title="scroll up"></span>             <span class="next" title="scroll left"></span>             <span class="prev" title="scroll right"></span>             <span class="toggle-view" title="toggle layout"></span>         </div>     </div>     <div class="content clearfix">         <div class="items">             <a class="temp" href="#" style="background: #e67e22;">                 <span>music</span>                 <img height="150px" width="150px" class="icon" src="images/my-music.png" alt="" />             </a>             <a class="box" href="#" style="background: #1abc9c;">                 <span>tv &amp; movies</span>                 <img height="150px" width="150px" class="icon" src="images/my-movies.png" alt="" />             </a> 

here (partial) js:

$(function() {  // elements increase speed $layout = $('.metro-layout'); $container = $('.metro-layout .content'); $('.items').isotope({     itemselector: '.box',     filter: '.box'  });   // method should called when want switch layout style - horizontal or vertical function changelayoutmode(ishorizontal) {     $('.items',$layout).removeattr('style'); // clean style     if ( ishorizontal ) {         $('.items',$layout).css({             width: $('.items',$layout).outerwidth() // make sure whole width of items container         }).isotope({             itemselector : '.box',             layoutmode: 'masonryhorizontal',             animationengine : 'css'         });     } else {         $('.items',$layout).css({ width: 'auto' }).isotope({             itemselector : '.box',             layoutmode: 'masonry',             animationengine : 'css'         });     } } changelayoutmode($layout.hasclass('horizontal')); // init initial state based on class in markup 

i don't think need full code, if feel please let me know.

also, if need more info me or question not clear please let me know. being said can assist me issue?

here link jsfiddle: http://jsfiddle.net/mikev10/r229k3j0/2/ notice far right 'music' box still there though has class of 'temp'

the reason isn't filtering because isotope filters items in control of. itemselector .box , filter .box. won't remove .temp item because isn't loaded isotope. below working example.

http://jsfiddle.net/r229k3j0/6/

you'll notice itemselector .item , added class of elements inside of .items. appears behave intend.