How to filter Portfolio grid with nav nav-pills in twitter bootstrap3 with jquery

Question

I want to filter portfolio grid with nav nav-pills in bootstrap3

HTML:

    div class="row">
        <div class="col-lg-12">

<div class="centered-pills">
 <ul id="filterOptions" class="nav nav-pills">

   <li> <a href="#" class="all">All</a></li>

  <li><a href="#" class="latest">Latest</a></li>
  <li><a href="#" class="featured">Featured</a></li>
 <li><a href="#" class="trending">Trending</a></li>
 </ul>
</div>

<ul class="grid cs-style-6">
            <li class="item latest">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Hoodies</h3>
                        <span>ToughSkins</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item featured">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Featured Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item trending">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Trending Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item latest">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Fleece Hoodies</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item featured">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Featured Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>
            <li class="item trending">
                <figure>
                    <a href="portfolio-item.html">
                        <img class="img-responsive img-portfolio img-hover" src="image/items/1.jpeg" alt=""></a>
                    <figcaption>
                        <h3>Trending Camera</h3>
                        <span>Jacob Cummings</span>
                        <a href="portfolio-item.html" class="btn btn-default btn-md" role="button">Take a look</a>
                    </figcaption>
                </figure>
            </li>


        </ul>   

How should i write jquery to filter it grid portfolio based on nag-pill selection?

I have written jQuery but it is not working

I'm sure it is wrong

 $(document).ready(function(){

$('#filterOptions li a').click(function() {
// fetch the class of the clicked item
var ourClass = $(this).attr('class');

// reset the active class on all the buttons
$('#filterOptions li').removeClass('active');
// update the active state on our clicked button
$(this).parent().addClass('active');

if(ourClass == 'all') {
  // show all our items
  $('.grid cs-style-6').children('li.item').show();
}
else {
  // hide all elements that don't share ourClass
  $('.grid cs-style-6').children('li:not(.' + ourClass + ')').hide();
  // show all elements that do share ourClass
  $('.grid cs-style-6').children('li.' + ourClass).show();
   }
return false;
  });
});

Can some one please help me with this?

Answer 1

// on click of a check the data attr and show li based on attr val  
$('#filterOptions li a').on('click', function (e) {
    e.preventDefault(); // 
    a = $(this).data('filter'); // finding the data value
    $('.grid li').fadeOut().promise().done(function () { // hiding all li
        $('.grid li.' + a).fadeIn(); // show only the class having the class == data attr
    });

    if ($(this).hasClass('all')) { // check if all is clicked 
        $('.grid li').fadeOut().promise().done(function () { // hiding all
            $('.grid li').fadeIn(); // showing all
        });
    }
});

// on document ready check if a has class active
if ($('#filterOptions li a').hasClass('active')) { // check if active class it there you 
    $('.grid li').fadeIn(); //
}

demo - http://jsfiddle.net/d9b8pLvw/1/

Note: I have added data-filter attribute for a tags and gave the values you and added active class for a tag with all class