Accéder à un sous-div d'un div

Version imprimable

Bonjour,
dans ce post, on m' a fourni un moyen de plier-déplier un contenu. Je voudrais améliorer ce code. Pour cela, j'aurais besoin de deux choses :

Dans le code ci-dessous, je voudrais faire référence à content relativement à fold_1, ou bien relativement à fold_2 séparément. Ceci serait pour voir comment on fait ce genre de chose directement.
Plus important, je voudrais que cette référence soit utilisable dans l'extrait de code donné ci-dessous. L'idée serait de créer un code JS générique où il serait fait référence aux div dont la classe commence par fold.
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <script type="text/javascript"> $(document).ready(function(){ $(".fold_1").click(function(){ ??contenuDeFold_1??.show(); <---- Ma question... }); }); </script> </head> <body> <div class="fold_1">Un bon début ? <div class="content"> Bla, bla.... <div class="fold_2">Un meilleur départ ? <div class="content"> Oh, ah.... </div> </div> </div> </div> </body> </html>

Ceci te convient-il ?

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
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('div[class^="fold"]').click(function(){
					$(this).children(".content").show();
                });
            });
        </script>
		<style type="text/css">
		.content{
			display:none;
		}
		</style>
    </head>
    <body>
		<div class="fold_1">Un bon début ?
			<div class="content">
				Bla, bla....
 
				<div class="fold_2">Un meilleur départ ?
					<div class="content">
						Oh, ah....
					</div>
				</div>
			</div>
		</div>
    </body>
</html>

Merci mais... En fait, j'ai l'exemple suivant :

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources :
    http://www.developpez.net/forums/d995664/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/folding-editeurs-programmes/#post5578498
    http://www.developpez.net/forums/d999768/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/debutant-acceder-sous-div-div/#post5591994
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                $('div[class^="fold"]').click(function(){
                    $(this).children(".content").toggle();
                });
            });
        </script>
    </head>
 
    <body>
Un exemple vite fait.
<br/><br/>
x = 5
<br/><br/>
<div class="fold_1" style="cursor:pointer;">def function(bidon):
    <div class="content">
        <br/>    """
        <br/>    Un petit commentaire...
        <br/>    """
        <br/>    print('Cette fonction est bidon...')
 
        <div class="fold_2" style="cursor:pointer;">for i in range(5):
            <div class="content">
            <br/>    print(i)
            </div>
        </div>
    </div>
</div>
<br/>y = 2
 
    </body>
</html>

Quand on clique sur le div fold_1, tout s'affiche et s'efface comme prévu.

Par contre, si le contenu de fold_1 est visible, alors si je clique sur fold_2, alors tout le contenu de fold_1 est caché alors que je ne souhaiterais cacher que le contenu de fold_2.
Comment faudrait-il faire évoluer le code qui pour le coup a une réaction logique ?

Je vais repartir du code du post cité ci-dessus en y ajoutant la méthode précédente.

Mon problème se complique... J'ai le code suivant :

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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!--
Sources :
    http://www.developpez.net/forums/d995664/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/folding-editeurs-programmes/#post5578498
    http://www.developpez.net/forums/d999768/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/debutant-acceder-sous-div-div/#post5591994
-->
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                $('div[class^="fold"]').click(function(){
                    $(this).children(".content:first-child").toggle();
                });
            });
        </script>
 
        <script type="text/javascript">
            $(document).ready(function(){
                // Si on clique sur un extrait
                $('div[class^="fold"]').click(function(){
                    // On cache l'extrait et on affiche le texte complet
                    $(this).hide();
                    $(this).next().show();
                });
                // Si on clique sur un extrait complet
                $('div[class^="content_fold"]').click(function(){
                    // On cache le texte complet et on affiche l'extrait
                    $(this).hide();
                    $(this).prev().show();
                });
            });
        </script>
    </head>
 
    <body>
<div class="fold_1" style="cursor:pointer;">+ def function(bidon):</div>
<div class="content_fold_1" style="display:none;">
    - def function(bidon):
    <br/>    """
    <br/>    Un petit commentaire...
    <br/>    """
    <br/>    print('Cette fonction est bidon...')
    <div class="fold_2" style="cursor:pointer;">+ for i in range(5):</div>
    <div class="content_fold_2" style="display:none;">
        - for i in range(5):
        <br/>    print(i)
    </div>
</div>
 
    </body>
</html>

Le souci que je rencontre est que lorsque je vais cliquer sur content_fold_2, automatiquement je clique sur content_fold_1...

Il va falloir que je revoie ma façon de faire. Pour cela, il faudrait que je récupère le nom de la classe cliquée dans une variable JS. Comment fait-on ?

15/11/2010, 17h40
rambc

La suite est ici.