span visible lors d'un clique.

**kOrt3x** · 11/07/2012, 18h27

Bonjour,

j'aimerai quand je clique sur un titre que le texte s'affiche, voici le code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<a>Le Titre</a><br>
        <span>
            <p>Texte 1 a afficher</p>
            <p>Texte 2 a afficher</p>
            <p>Texte 3 a afficher</p>
        </span>
<a>Le Titre 2</a><br>
        <span>
            <p>Texte 1 a afficher</p>
            <p>Texte 2 a afficher</p>
            <p>Texte 3 a afficher</p>
        </span>

Donc, quand je clique sur le titre 1, je vois voir uniquement le contenu des balises span juste en dessous.
Je précise que le HTML est modifiable sans problème.

Comment faire un petit script pour faire ça ?

Par avance, merci.

**Bovino** · 11/07/2012, 19h42

.next('span') devrait te servir.

**kOrt3x** · 12/07/2012, 12h31

J'ai fais ça, mais ça n'a pas l'air de fonctionner :

Code :

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

1
2
3
4
$('a.aBoxFaq').click(function(){
 
            $(this).next('span').show('slow');
        });

**SpaceFrog** · 12/07/2012, 12h46

ta balise a a la bonne class ?

**kOrt3x** · 12/07/2012, 12h49

Envoyé par SpaceFrog

ta balise a a la bonne class ?

Oui :

Code html :

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

1
2
3
4
5
6
<a class="aBoxFaq" href="#"></a><br>
            <span class="boxFaq">
                <p></p>
                <p></p>
                <p></p>
            </span>

**kOrt3x** · 12/07/2012, 12h52

Ah, je pense que j'ai trouvé, c'est la balise <br> qui fait que ça ne fonctionne pas.

**SpaceFrog** · 12/07/2012, 13h10

inhibe le href ...

Code :

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

1
2
3
4
$('a.aBoxFaq').click(function(e){
            e.preventDefault();
            $(this).next('span').show('slow');
        });

c'est pas le br qui pose souci

ou remplace par .closest('span')

**kOrt3x** · 12/07/2012, 13h26

Envoyé par SpaceFrog

inhibe le href ...

Code :

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

1
2
3
4
$('a.aBoxFaq').click(function(e){
            e.preventDefault();
            $(this).next('span').show('slow');
        });

c'est pas le br qui pose souci

ou remplace par .closest('span')

Je viens tester ton code avec le br, ça ne fonctionne pas, mais sans le br, ça fonctionne.

**SpaceFrog** · 12/07/2012, 13h39

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
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
<script type="text/javascript">
$(function(){
 
$('.aBoxFaq').click(function(e){
  e.preventDefault();
  $(this).nextAll('.boxFaq:eq(0)').show('slow')
  })
})
 
 
</script>
<style type="text/css">
.boxFaq {
display:none;}
}
 
</style>
</head>
 
<body>
<a class="aBoxFaq" href="#">foo</a><br/>
            <span class="boxFaq">
                <p>fdghfg</p>
                <p>fghdfgh</p>
                <p>fghfdg</p>
            </span>
            <a class="aBoxFaq" href="#"></a><br>
            <span class="boxFaq">
                <p>fdghfghd</p>
                <p>dfghdfgh</p>
                <p>fdghfgh</p>
            </span>
<a class="aBoxFaq" href="#">foo</a><br>
            <span class="boxFaq">
                <p>fghdfgh</p>
                <p>dfghfgh</p>
                <p>dfghdfghfg</p>
            </span>
            <a class="aBoxFaq" href="#"></a><br>
            <span class="boxFaq">
                <p>dfghfgh</p>
                <p>fghdfgh</p>
                <p>fghdfghdfgh</p>
            </span>
<a class="aBoxFaq" href="#">foo</a><br>
            <span class="boxFaq">
                <p>fghdfghdfgh</p>
                <p>fdghfdghdfgh</p>
                <p>fdghdfhgdfgh</p>
            </span>
            <a class="aBoxFaq" href="#"></a><br>
            <span class="boxFaq">
                <p>dfghdfgh</p>
                <p>dfghfgh</p>
                <p>dfghfghdfg</p>
            </span>
<a class="aBoxFaq" href="#">foo</a><br>
            <span class="boxFaq">
                <p>fdghfghfg</p>
                <p>dfghfghfgh</p>
                <p>fghfgh</p>
            </span>
            <a class="aBoxFaq" href="#"></a><br>
            <span class="boxFaq">
                <p>dfghdfghh</p>
                <p>fdghdfghf</p>
                <p>fdghfgh</p>
            </span>
<a class="aBoxFaq" href="#">foo</a><br>
            <span class="boxFaq">
                <p>fghdfghfdg</p>
                <p>fdghdfgh</p>
                <p>dfghdfghfg</p>
            </span>
            <a class="aBoxFaq" href="#"></a><br>
            <span class="boxFaq">
                <p>dfghfghfdgh</p>
                <p>dfghdfghgfd</p>
                <p>fdghdfgh</p>
            </span>