I'm trying to do an easy filter script to show the elements I want to see depending the option I've chosen. I don't want to use an external script. I'd like to do it by myself.

On the one hand, I have the option in two lists

1. <ul class =" provincias ">
2.       <li data-provfil =" 6 ">Text</li>
3.       ...
4. </ul>
5. <ul class =" categorias ">
6.       <li data-catfil =" 6 ">Text</li>
7.       ...
8. </ul>

and, on the other hand, I've the elements:

1. <section>
2.       <article>
3.             <header>
4.                   <h4>
5.                         <span class="cat" data-cat="1">Categy 1</span>
6.                         ....
7.                         in
8.                         <span class="prov" data-prov="5">Province 1</span>
9.                         ....
10.                   </h4>
11.             </header>
12.       </article>
13.       ...
14. </section>

I used ' ....' in order to tell the element may repeat.

And, finally, the jQuery Script is

1. <script>
2. $(document).ready(function() {
3. $('article')
4. .mouseenter(function() {
5. $( this ).css('opacity','0.5');
6. })
7. .mouseleave(function() {
8. $( this ).css('opacity','1');
9. })
10. .click(function(){
11. alert('show the details of ' + $(this).find('h2').text());
12. });
13. $('aside div ul li')
14. .click(function(){
15. if($(this).data('provfil')){
16. var iddata = 'prov';
17. var actprov = $(this).data('provfil');
18. }else{
19. var iddata = 'cat';
20. var actprov = $(this).data('catfil');
21. }
23. if(!$(this).children().hasClass('quitar-filtro')){
24. $(this).append(' <span class="quitar-filtro">X</span>');
25. $(this).show().siblings().hide();
27. $("[data-"+iddata+"!="+actprov+"]")
28. .closest('article')
29. .hide(1000);
31. $("[data-"+iddata+"="+actprov+"]")
32. .closest('article')
33. .show(1000);
35. }else{
36. $(this).remove();
37. $(this).closest('ul').children().show();
39. $("[data-"+iddata+"!="+actprov+"]")
40. .closest('article')
41. .show(1000);
42. }
43. });
44. });
45. </script>

I'm sure is very basic.

What problem am I having?

1. When I restore the elements (clicking on .quitar-filtro) the list elements don't appear again. 

2. When I click on  .quitar-filtro the article elements appear again ignoring the other filter applied

3. and finally, I'd really like to get a more visual attractive effect than show(1000) and hide(1000) for the article elements.

Could you please help me?

I'd be very grateful for some advice

THANKS