Databases
StackOverflow2013
Postsdbo
POHow to make a multi category filter with JQuery, HTML and CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make a multi category filter with JQuery, HTML and CSS
    text
    copied!<p>I made a little website to show you my problem: www.brainfmedia.com</p> <p>The portfolio displayed can be filtered with the navigation elements (all, ui design, ...)</p> <p>I want to change this "simple" filter to a "multi-category" filter.</p> <p>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.</p> <p>What do I have to change in my HTML. Is there an easier way to my approach? THANK YOU SO MUCH.</p> <p>Here is the part of the HTML file so you can understand the code better:</p> <pre><code>&lt;div class="sorting-block"&gt; &lt;ul class="sorting-nav sorting-nav-v1 text-center"&gt; &lt;li class="filter" data-filter="all"&gt;All&lt;/li&gt; &lt;li class="filter" data-filter="category_1"&gt;UI Design&lt;/li&gt; &lt;li class="filter" data-filter="category_2"&gt;Wordpress&lt;/li&gt; &lt;li class="filter" data-filter="category_3"&gt;HTML5/CSS3&lt;/li&gt; &lt;li class="filter" data-filter="category_4"&gt;Bootstrap 3&lt;/li&gt; &lt;/ul&gt; &lt;ul class="row sorting-grid"&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_3" data-cat="1"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/11.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_1" data-cat="3"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/12.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1" data-cat="2"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/13.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_4" data-cat="3"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/3.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_1 category_4" data-cat="2"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/2.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_4" data-cat="1"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/6.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_2 category_3 category_4" data-cat="2"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/8.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_1 category_2 category_3" data-cat="1"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/1.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_4 category_2" data-cat="1"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/11.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="col-md-3 col-sm-6 col-xs-12 mix category_3 category_2" data-cat="3"&gt; &lt;a href="#"&gt; &lt;img class="img-responsive" src="assets/img/main/12.jpg" alt=""&gt; &lt;span class="sorting-cover"&gt; &lt;span&gt;Happy New Year&lt;/span&gt; &lt;p&gt;Anim pariatur cliche reprehenderit&lt;/p&gt; &lt;/span&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload