Discussion :

[RowanMayfair]

Bonjour les confinés ,

Je vais essayer de ne pas vous assommer avec mon code, mais faut que je vous montre quand même un peu la structure :

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
<div class="row">
                    <div class="col-sm-4">
                        <div class="tp" id="anglais">
                            <div class="titre">
                                <h2>Module Révision Anglais</h2>
                                <div class="logos">                                    
                                    <img src="images/logo_Python.png" alt="image logo Python">
                                </div>
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </div>
                            <div class="corps">
                                <p>Projet : Petit programme destiné à la révision de vocabulaire / grammaire en anglais</p>
                                <img src="images/captures/Capture_anglais.png" alt="copie écran programme révision anglais">
                                <br> <br>
                                <a href="docs/Synthèse_Module anglais.pdf" target="_blank">Fiche de Synthèse</a>                                
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="tp" id="urban">
                            <div class="titre">
                                <h2>Urban Marginal</h2>
                                <div class="logos">
                                    <img src="images/logo_eclipse.png" alt="image logo eclipse"> 
                                    <img src="images/logo_java.png" alt="image logo java">
 
                                </div>
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </div>
                            <div class="corps">
                                <p>TP : Jeu de plateau en 2D client-serveur, l'objectif est de tuer l'adversaire</p>
                                <img src="images/captures/Capture_Urban.png" alt="copie écran jeu Urban Marginal">
                                <br> <br>
                                <a href="docs/synthèse_Urban_Marginal.pdf" target="_blank">Fiche de Synthèse</a>                                
                            </div>
                        </div>
                    </div>
                    (...)
                    </div>
                </div>

Je vous le résume :
Dans chaque div ".row" j'ai 3 div ".tp". Et dans chaque .tp, j'ai une div .titre et une div .corps.

Je souhaite qu'à l'ouverture, les corps soient cachés, qu'il n'y ait que les titres qui apparaissent.
Jusqu'ici, tout va bien.

Là où ça se corse, c'est que, bien sûr, je voudrait que quand l'utilisateur clique sur un .titre, le .corps apparaisse, et seulement celui-là.
Je découvre seulement Jquéry, c'est peut-être ambitieux mon truc

Bref.
Donc j'en suis là :

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
$(".corps").hide();
 
    var $lesTitres = $(".row").children(".titre"),
    $lesCorps = $(".row").children(".corps"),
    totalTP = $lesTitres.length,
    openedTp = -1;
 
    validIndex = function(indexToCheck) {
        return (indexToCheck >=0 && indexToCheck < totalTP);
    },
 
    init = function() {
 
        if (validIndex(openedTp)) {
            $lesTitres.eq(openedTp).click(function() {
                $lesCorps.eq(openedTp).toggle(2000);
            });
        }
    };
 
   init();
 
});

et donc ça ne fonctionne pas.
Enfin mes .corps sont bien cachés, mais j'ai beau cliquer, rien ne s'affiche.
Donc y a un truc ou 2 que j'ai pas dû bien faire/bien comprendre

Quelqu'un pourrait-il m'aider ?

D'avance merci


Edit : bien sûr j'ai regardé dans les outils développement dans Chrome, j'ai pas de message d'erreur. Dommage

[Toufik83]

Salut,

Le plus simple est comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$('.titre').click(function(){
	$('.corps').hide();//cacher les ".corps"
	$(this).next('.corps').show(); //montrer le ".corps" suivant de ".titre" sur lequel tu cliques
});

[RowanMayfair]

Merci Toufik83, en effet c'est bien plus simple

Par contre, ça marche pas avec toggle.
Au risque de paraître exigeante, j'aurai voulu qu'on puisse ouvrir le corps au 1er clic, et le fermer en cliquant de nouveau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('.titre').click(function(){
	$('.corps').hide();//cacher les ".corps"
	$(this).next('.corps').toggle(); /
});

c'est peut-être pas possible ? ou trop compliqué ?

[Invité]

Bonjour,

• .not()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(function(){
  $('.titre').click(function(){
    $('.corps').not($(this).next('.corps')).hide();//cacher les AUTRES ".corps" (SAUF celui-ci)
    $(this).next('.corps').toggle(); // montrer/masquer le ".corps" suivant de ".titre" sur lequel tu cliques
  });
});

[RowanMayfair]

Oh classe

Merci jreaux62