How to make a multi category filter with JQuery, HTML and CSS

Question

I made a little website to show you my problem: www.brainfmedia.com

The portfolio displayed can be filtered with the navigation elements (all, ui design, ...)

I want to change this "simple" filter to a "multi-category" filter.

EXAMPLE: I want to chose "UI design" and then there are all UI design items displayed. Then I want to filter AGAIN for criteria "available; on demand" and for criteria like "cheap, moderate, expensive". But I do not want to have ALL Items (even the other main-categories) in my results. My probleme right now is, that I can only filter for 1 category at a time.

What do I have to change in my HTML. Is there an easier way to my approach? THANK YOU SO MUCH.

Here is the part of the HTML file so you can understand the code better:

<div class="sorting-block">
    <ul class="sorting-nav sorting-nav-v1 text-center">
        <li class="filter" data-filter="all">All</li>
        <li class="filter" data-filter="category_1">UI Design</li>
        <li class="filter" data-filter="category_2">Wordpress</li>
        <li class="filter" data-filter="category_3">HTML5/CSS3</li>
        <li class="filter" data-filter="category_4">Bootstrap 3</li>
    </ul>

    <ul class="row sorting-grid">
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_3" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/11.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_1" data-cat="3">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/12.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1" data-cat="2">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/13.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_4" data-cat="3">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/3.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1 category_4" data-cat="2">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/2.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_4" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/6.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_3  category_4" data-cat="2">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/8.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_2 category_3" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/1.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_4 category_2" data-cat="1">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/11.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
        <li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_2" data-cat="3">
            <a href="#">
                <img class="img-responsive" src="assets/img/main/12.jpg" alt="">
                <span class="sorting-cover">
                    <span>Happy New Year</span>
                    <p>Anim pariatur cliche reprehenderit</p>
                </span>
            </a>
        </li>
    </ul>

    <div class="clearfix"></div>
</div>

not terribly difficult creating the filters, but take a look at isotope plugin...does all the filtering with animations and lots of options in API — charlietfl
– charlietfl, Commented Nov 24, 2013 at 19:18
so how can i make the filters myself? do you have a link to a tutorial or maybe a little advice more? — user3028984
– user3028984, Commented Nov 24, 2013 at 19:23

Alexander Schranz · Accepted Answer · 2013-11-24 19:24:52Z

2

The jQuery.mixitup script you use has a multiFilter option. When you activate this you can add additional filters and combine them.

 $('.sorting-grid').mixitup({multiFilter:true});

answered Nov 24, 2013 at 19:24

Alexander Schranz

2,4883 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3028984 Over a year ago

Thank you so much, I am looking into this right now, but it did not work yet, could you give me a little insight in how i change the code then? thx

Alexander Schranz Over a year ago

update to the latest version of mixitup. mixitup.io $('.sorting-grid').mixitup({ multiFilter: 'true', filterLogic: 'and' });

Collectives™ on Stack Overflow

How to make a multi category filter with JQuery, HTML and CSS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related