Discussion :

[bulldog7859]

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 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
<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 :

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
 $(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

[danielhagnoul]

Bonsoir

Un ID doit être unique !

Exemple :

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
 <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 :

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
$( "#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();
		}
	});
});

[bulldog7859]

Bonjour danielhagnoul et merci pour ta réponse,

En effet, GROSSE ERREUR DE ID.

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

Voici mon code html:

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
    <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 :

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
$(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();
 
 
	});
 
});