filter

by Akram kamal

HTML

<ASIDE>
    <div>
     <ul class="provincias">
         <li data-provfil="1">Province 1</li>
         <li data-provfil="2">Province 2</li>
         <li data-provfil="3">Province 3</li>
     </ul>
</DIV>
    <div>
        <ul class="categorias">
            <li data-catfil="1">Category 1</li>
            <li data-catfil="2">Category 2</li>
        </ul>
    </DIV>
 </ASIDE>
<section>
     <article>
         <h4>
              <span class="cat" data-cat="1">Categy 1</span>
             in
             <span class="prov" data-prov="1">Province 1</span>
         </h4>
    </article>
     <article>
         <h4>
              <span class="cat" data-cat="2">Categy 2</span>
             in
             <span class="prov" data-prov="3">Province 3</span>
         </h4>
    </article>
    <article>
         <h4>
              <span class="cat" data-cat="2">Categy 2</span>
             in
             <span class="prov" data-prov="2">Province 2</span>
         </h4>
    </article>
     <article>
         <h4>
              <span class="cat" data-cat="1">Categy 1</span>
             in
             <span class="prov" data-prov="3">Province 3</span>
         </h4>
    </article>
    <article>
         <h4>
              <span class="cat" data-cat="2">Categy 2</span>
             in
             <span class="prov" data-prov="1">Province 1</span>
         </h4>
    </article>
</section>

CSS

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* */
@font-face {
    font-family: 'MyriadProRegular';
    src: url('../../fonts/myriadpro-regular.eot');
    src: url('../../fonts/myriadpro-regular.eot') format('embedded-opentype'),
         url('../../fonts/myriadpro-regular.woff') format('woff'),
         url('../../fonts/myriadpro-regular.ttf') format('truetype'),
         url('../../fonts/myriadpro-regular.svg#MyriadProRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}
html{
	text-align:center;	
	background-color:#fff;
}
body{
	font-size:1em;
	line-height:120%;
	color:#fff;
	font-weight:normal;
	font-family: 'MyriadProRegular', Helvetica, Arial, sans-serif;
	width:1200px;
	margin:0 auto;
	background-color:#96Be14;
	display:block;
}
body > header{
	clear:both;
	display:block;
	overflow:hidden;	
	margin:0 0 40px 0;
	padding:20px 0;
}
header h1{
	float:left;	
}
header h1 a{
	width:330px;
	height:0;
	display:block;
	background: #ffffff url('../images/wishmaker-logo.png') 30px 15px no-repeat;
	background-size:90%;
	border-bottom: 60px solid transparent;
	border-right: 40px solid #96Be14;
	-moz-transform:...

JavaScript

$(document).ready(function() {
			$('article')
			.click(function(){
				alert('show the details of ' + $(this).find('h2').text());
			});
			$('aside div ul li')
			.click(function(){
                
				if(!$(this).children().hasClass('quitar-filtro')){

          $(this).append(' <span class="quitar-filtro">X</span>');
     $(this).show().siblings().hide();
     
     $('article')
     .hide();
     
     $('aside div ul.categorias li:visible').each(function(){
            $that = $(this);
            $('aside div ul.provincias li:visible').each(function(){
                $('article').has('span[data-cat="'+$that.data('catfil')+'"]').has('span[data-prov="'+$(this).data('provfil')+'"]')
                .closest('article')
				 .fadeIn();
            });
        });       
                    $('li').not(':has(".quitar-filtro")').hide();
                    $('article:visible .cat').each(function(){
                        $('li[data-catfil="'+$(this).data('cat')+'"]').show();
                    });
                    $('article:visible .prov').each(function(){
                        $('li[data-provfil="'+$(this).data('prov')+'"]').show();
                    });

    }else{
     $(this).find('span.quitar-filtro').remove();
     $(this).siblings('li').show();
     
       
        $('aside div ul.categorias li:visible').each(function(){
            $that = $(this);
            $('aside div ul.provincias li:visible').each(function(){
                $('article').has('span[data-cat="'+$that.data('catfil')+'"]').has('span[data-prov="'+$(this).data('provfil')+'"]')
                .closest('article')
				.fadeIn();
            });
        });  
        $('li').not(':has(".quitar-filtro")').hide();
                    $('article:visible .cat').each(function(){
                        $('li[data-catfil="'+$(this).data('cat')+'"]').show();
                    });
                    $('article:visible .prov').each(function(){
                       ...