Isotpe filters only on data-filter="*", every other hides everything

Question

My isotope filter, works only on filter link that should display all containers, when every other filter is clicked, all containers are hidden.

Here is the working fiddle

Here is the code:

HTML

<div class="isotope-nav">
    <ul class="isotope-filters">
        <li><a class="#" data-filter="*">All posts</a>
        </li>           
        <li><a class="novo isotope-link" href="#" data-filter="novo">Novo</a>
        </li>
        <li><a class="uncategorized isotope-link" href="#" data-filter="uncategorized">Uncategorized</a>
        </li>
        <li><a class="vesti isotope-link" href="#" data-filter="vesti">Vesti</a>
        </li>
    </ul>
</div>
<!-- end .isotope-nav -->
<div class="isotope-container">
    <div class="col-lg-3 post-container uncategorized ">
        <div class="post-header">   
              <a href="#" class="isotope-link uncategorized">Uncategorized</a> 
        </div>
        <!-- end .post-header -->

    </div>
    <!-- end .post-container -->
    <div class="col-lg-3 post-container uncategorized ">
       <div class="post-header">    
             <a href="#" class="isotope-link uncategorized">Uncategorized</a> 
       </div>
       <!-- end .post-header -->

    </div>
    <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
              <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
        <!-- end .post-header -->
    </div>
    <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
         <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
        <!-- end .post-header -->
    </div>
     <!-- end .post-container -->
    <div class="col-lg-3 post-container vesti ">
        <div class="post-header">   <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
    <!-- end .post-header -->
    </div>
    <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
            <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
        <!-- end .post-header -->
    </div>
    <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
            <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
        <!-- end .post-header -->
    </div>
          <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
           <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
        <!-- end .post-header -->
    </div>
           <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
            <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
        <!-- end .post-header -->

    </div>
    <!-- end .post-container -->
    <div class="col-lg-3 post-container novo novo vesti ">
        <div class="post-header">   
             <a href="#" class="isotope-link novo">Novo</a>  <a href="#" class="isotope-link vesti">Vesti</a> 
        </div>
            <!-- end .post-header -->
    </div>
    <!-- end .post-container -->
</div>
<!-- end .isotope-container -->

JS

jQuery(document).ready(function($){
//isotope
$container = $('.isotope-container');
$container.isotope({
    itemSelector : '.post-container',
    layoutMode : 'masonry'
});

$('.isotope-filters li a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});
});

CSS

/**** Isotope filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

Answer 1

You need to specify the class name using selectors syntax i.e: .novo in your data-filter attribute but you forgot the . and just had novo. Same for the others.

Change your data-filter values to .novo, .uncategorized and .vesti like this:

<div class="isotope-nav">
    <ul class="isotope-filters">
        <li><a class="#" data-filter="*">All posts</a>
        </li>           
        <li><a class="novo isotope-link" href="#" data-filter=".novo">Novo</a>
        </li>
        <li><a class="uncategorized isotope-link" href="#" data-filter=".uncategorized">Uncategorized</a>
        </li>
        <li><a class="vesti isotope-link" href="#" data-filter=".vesti">Vesti</a>
        </li>
    </ul>
</div>

---

DEMO - updating the data-filter values

---