Affichage de div

Version imprimable

Affichage de div

Bonjour à tous :)

Je rencontre un problème pour cacher des div contenues dans une autre div.

Par exemple, si un utilisateur clique sur 'cat 14', toutes les div différentes de 'cat 14' seront cachées. Jusque là pas de soucis !

A partir de ce même exemple, la div parente "box" contenant '<div id="categorie" cat="2">' reste afficher sans <div id="categorie" cat="2">.

Ce que je souhaiterai c'est que la div parente "box" ne s'affiche pas si les div contenues à l'intérieur sont cachées.

J'espère avoir été clair et vous remercie sincèrement par avance pour votre aide :)

Voici mon code html:

Code:

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
<div id="subMain">
        <div id="archivesResult_Content">
            <div id="box">
            <div id="categorie" cat="2">
                ...
            </div>
            </div>
            <div id="box">
                <div id="categorie" cat="14">
                    ...
                </div>
                <div id="categorie" cat="5">
                    ...
                </div>
                <div id="categorie" cat="14">
                    ...
                </div>
            </div>
            <div id="box">
                <div id="categorie" cat="13">
                    ...
                </div>
            </div>
        </div>
    </div>

Mon code jquery

Code:

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
 $(function(){
    	$('ul#groupCat li').click(function(){
 
    		var catChoice=$(this).attr('cat');
 
    		if(catChoice == "00"){
    					$("#subMain  #archivesResult_Content #box #categorie").slideDown();
    					return;
    		}
 
    		var i=0;
 
    		$("#subMain  #archivesResult_Content #box #categorie").each(function(){
 
    			if($(this).attr("cat") != catChoice){      
 
    				$(this).slideUp();
 
    			}else{
 
    				i++;
    				$(this).slideDown();
 
    			}
 
    		});
 
       });
 
    });

Merci d'avance pour votre aide :)

Bonsoir

Un ID doit être unique !

Exemple :

Code:

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
 <ul id="groupCat">
 	<li cat="00">un li</li>
 	<li cat="2">un li</li>
 	<li cat="14">un li</li>
 	<li cat="13">un li</li>
 </ul>
 
 <div id="subMain">
	<div id="archivesResult_Content">
		<div class="box">
			<div class="categorie" cat="2">
				<p>cat2</p>
			</div>
		</div>
		<div class="box">
			<div class="categorie" cat="14">
				<p>cat14</p>
			</div>
		</div>
		<div class="box">
			<div class="categorie" cat="13">
				<p>cat13</p>
			</div>
		</div>
	</div>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$( "#groupCat li" ).click( function(){
	var catChoice = $( this ).attr( 'cat' ),
		jObj = null;
 
	if ( catChoice == "00" ){
		$( "#subMain" ).slideUp();
		return;
	}
 
	$( "#subMain" ).slideDown();
 
	$( "div.categorie" ).each( function( i, item ){
		jObj = $( item );
 
		if ( jObj.attr( "cat" ) != catChoice ){      
			jObj.parent().slideUp();
		} else {
			jObj.parent().slideDown();
		}
	});
});

Bonjour danielhagnoul et merci pour ta réponse, ;)

En effet, GROSSE ERREUR DE ID. :oops:

Bon, j'ai corrigé et adapté le code autrement en ajoutant un attribut à la classe demandée.

J'ai toujours le problème avec le parent pour le cacher.
Je m'explique:

Si je choisis 'cat 14' çà fonctionne et les autres div disparaissent
Si je choisis 'cat 3' çà fonctionne et les autres div disparaissent
Si je choisis 'cat 13' çà ne fonctionne pas et toutes les div disparaissent

Merci d'avance pour ton aide précieuse :D

Voici mon code html:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div id="subMain"> <div id="archivesResult_Content"> <div id="archivesResult_title"> <div class="box"> <div class="date"></div> <div class="categorie" cat="14"> <div class="categorie" cat="13"> </div> <div class="box"> <div class="date"></div> <div class="categorie" cat="3"> <div class="categorie" cat="13"> </div> </div> </div>
Voici le code jquery:
Code:

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 $(function(){ $('ul#groupCat li').click(function(){ var catChoice= $(this).attr('cat'), $subMain = $("#subMain"); if(catChoice == "00"){ $subMain.find("div.box").slideDown(); $subMain.find("div.categorie").slideDown().removeAttr('catsort'); return; } $subMain.find('div.categorie[cat!="' + catChoice + '"]').slideUp().removeAttr('catsort'); $subMain.find("div.categorie[cat=" + catChoice + "]").attr('catsort', 'Yes').slideDown().parent().slideDown().siblings("div .box").slideUp(); }); });