Apply data-filter on <a>

Question

I am using a showcase display which apply filters to the data depending on the category.

<nav id="portfolio-filter" class="span12">
<ul>
    <li class="active all">
        <a href="#" data-filter="*">View All</a>
    </li>
    <li class="other">
        <a href="#" data-filter=".cat1">Category 1</a>
    </li>
    <li class="other">
        <a href="#" data-filter=".cat2">Category 2</a>
    </li>
</ul>

This above is the nav list that is used to click and apply the data-filter

It hides divs with the following format

<div class="portfolio-item cat1  v1 isotope-item" style="-webkit-transform: translate(0px, 0px);">
<div class="he-wrap tpl2">
    <img src="" alt="">
    <div class="shape2"></div>
    <div class="overlay he-view">
       <div class="bg a0">
            <div class="center-bar v1">
                <a href="#" class="link a0"></a>
                <p class="short_desc">short descript</p>
            </div>
        </div>    
    </div>
</div> 
<div class="project">
    <h6 class="helvetica"><a href="#">Title h6</a></h6>
    <span class="category">Category1</span>
</div>

Here is what I am trying to do with this. There are category pages that will and should ONLY display the category of its divs only, but when the page loads, if there are anything in the category it will just display every single item and I want it to not do that.

so i removed the first Li -> View All and tried ready -> click();

but it did not work as I imagined what are my options at this?

(here is my second in progress approach hide all div at ready. pull the div attr for data-filter then unhide divs with classes of the data-filter field?)

any input/help or comment would be great.

-----updated

<script type="text/javascript">

           $("document").ready(function() {
                var $cat = $("#portfolio-filter ul li:first-child a").attr('data-filter');
                $(".isotope").isotope({ filter: ".cat1" });
                if ($cat !='*'){
                //$(".v1:not("+$cat+")").css("display","none");
                }
    });
    </script>

it just won't apply the correct filters ~ it always displays none when I add the filter

Answer 1

You can use isotope for this, if you would like a jQuery only solution let me know.

Also, your second approach is fine 'hide all div at ready. pull the div attr for data-filter then unhide divs with classes of the data-filter field'.

Don't forget to add this to your script, this should basically fix your problem.

$('#portfolio-filter a').click(function(e){
       e.preventDefault();
        $('#portfolio-filter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});

Answer 2

I wrote this up quickly and maybe it will help you.

The idea is you use a :not CSS selector

.showcat1 > .item:not(.cat1) {
    display: none;
}

and then just toggle classes on the wrapper