Bonjour à tous,

Ayant résolu mon problème sur le moyen de cacher / montrer des divs, je passe à la deuxième phase de filtering suivant des class multiples.

J'ai trouvé sur le net un exemple de filtre qui utilise un menu.

Lorsque que l'on click dessus, cela fait apparaitre / disparaitre les éléments suivants la class de la div. Le code fonctionne très bien.

J'aimerai néanmoins améliorer le code afin de pouvoir réaliser un filtre avec des sélection multiple.

Dans l'exemple ci-dessous, les éléments du menu sont actives un à la fois.

J'aimerai pouvoir lorsque je click sur plusieurs éléments les rendre actif ou inactif selon le besoin.

Et donc filtrer des class multiple dans les divs.

Au final, avoir un filtre avec mot clés.

Ex: Si dans le menu, j'ai par exemple:

Tout | Mot clés 1 | Mot clés 2 | Mot clés 3.

Lorsque je click sur par exemple mot clés 1 et 2, il se mettent en surbrillance et affiche les divs ayant uniquement ces deux class.

Si je veux changer mon filtre, je "décoche" par exemple mot clés 1 et je click sur mot clés 3.

Mais pour l'instant le n'arrive par à réaliser ce que je veux faire.

Voici le code trouvé sur le net:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
 
<style type="text/css">
/* SIMLPE 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, font, 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 {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: collapse; border-spacing: 0; }
/*- -*/
/*- GENERIC BODY STYLES -*/
body {
        font: 12px/18px Arial, Helvetica, sans-serif;
        color: #333;
        background: #fff;
}
p { margin-bottom: 18px; }
a { text-decoration: underline; }
a:hover { text-decoration: none; }
#container { width: 802px; margin: 0 auto; }
/*- -*/
/*- FILTER OPTIONS -*/
ul#filterOptions {
        width: 802px;
        height: 52px;
        margin: 30px 0;
        overflow: hidden;
}
ul#filterOptions li { height: 52px; margin-right: 2px; float: left; }
ul#filterOptions li a {
        height: 50px;
        padding: 0 20px;
        border: 1px solid #999;
        background: #cfcfcf;
        color: #fff;
        font-weight: bold;
        line-height: 50px;
        text-decoration: none;
        display: block;
}
ul#filterOptions li a:hover { background: #c9c9c9; }
ul#filterOptions li.active a { background: #999; }
/*- -*/
/*- OUR DATA HOLDER -*/
#ourHolder { width: 800px; height: 850px; overflow: hidden; }
#ourHolder div.item {
        width: 200px;
        height: 200px;
        float: left;
        text-align: center;
}
#ourHolder div.item h3 { margin-top: 10px; font-size: 16px; line-height: 20px; }
/*- -*/
</style>
 
<script type="text/javascript">
$(document).ready(function() {
        $('#filterOptions li a').click(function() {
                // fetch the class of the clicked item
                var ourClass = $(this).attr('class');
                
                // reset the active class on all the buttons
                $('#filterOptions li').removeClass('active');
                // update the active state on our clicked button
                $(this).parent().addClass('active');
                
                if(ourClass == 'all') {
                        // show all our items
                        $('#ourHolder').children('div.item').show();    
                }
                else {
                        // hide all elements that don't share ourClass
                        $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
                        // show all elements that do share ourClass
                        $('#ourHolder').children('div.' + ourClass).show();
                }
                return false;
        });
});
</script>
 
<title>Simple data filtering using jQuery</title>
</head>
 
<body>
 
<div id="container">
  <ul id="filterOptions">
    <li class="active"><a href="#" class="all">All</a></li>
    <li><a href="#" class="prem">Premier League</a></li>
    <li><a href="#" class="champ">Championship</a></li>
    <li><a href="#" class="league1">League 1</a></li>
    <li><a href="#" class="league2">League 2</a></li>
  </ul>
 
  <div id="ourHolder">
    <div class="item league2">
      <img src="images/accrington-stanley.jpg" alt="Accrington Stanley" />
      <h3>Accrington Stanley</h3>
    </div>
    <div class="item prem">
      <img src="images/arsenal.jpg" alt="Arsenal" />
      <h3>Arsenal</h3>
    </div>
    <div class="item league2">
      <img src="images/burton-albion.jpg" alt="Burton Albion" />
      <h3>Burton Albion</h3>
    </div>
    <div class="item champ">
      <img src="images/cardiff-city.jpg" alt="Cardiff City" />
      <h3>Cardiff City</h3>
    </div>
    <div class="item champ">
      <img src="images/derby-county.jpg" alt="Derby County" />
      <h3>Derby County</h3>
    </div>
    <div class="item prem">
      <img src="images/everton.jpg" alt="Everton" />
      <h3>Everton</h3>
    </div>
    <div class="item league2">
      <img src="images/morecambe.jpg" alt="Morecambe" />
      <h3>Morecambe</h3>
    </div>
    <div class="item champ">
      <img src="images/norwich-city.jpg" alt="Norwich City" />
      <h3>Norwich City</h3>
    </div>
    <div class="item league1">
      <img src="images/notts-county.jpg" alt="Notts County" />
      <h3>Notts County</h3>
    </div>
    <div class="item champ">
      <img src="images/reading.jpg" alt="Reading" />
      <h3>Reading</h3>
    </div>
    <div class="item league1">
      <img src="images/sheffield-wednesday.jpg" alt="Sheffield Wednesday" />
      <h3>Sheffield Wednesday</h3>
    </div>
    <div class="item prem">
      <img src="images/sunderland.jpg" alt="Sunderland" />
      <h3>Sunderland</h3>
    </div>
    <div class="item prem">
      <img src="images/tottenham-hotspur.jpg" alt="Tottenham Hotspur" />
      <h3>Tottenham Hotspur</h3>
    </div>
    <div class="item champ">
      <img src="images/watford.jpg" alt="Watford" />
      <h3>Watford</h3>
    </div>    
  </div>
</div>
 
</body>
</html>