span visible lors d'un clique.

Bonjour,

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

1 2 3 4 5 6 7 8 9 10 11 12 13 <a>Le Titre</a> Texte 1 a afficher Texte 2 a afficher Texte 3 a afficher <a>Le Titre 2</a> Texte 1 a afficher Texte 2 a afficher Texte 3 a afficher 
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.

.next('span') devrait te servir.

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

Code:

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

ta balise a a la bonne class ?

Citation:

Envoyé par SpaceFrog

ta balise a a la bonne class ?

Oui :

Code:

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

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

inhibe le href ...

Code:

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')

Citation:
Envoyé par SpaceFrog
inhibe le href ...
Code:

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.

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

Super, avec ça, ça fonctionne.

Encore une petite chose, si je veux faire disparation le span en recliquant sur le lien ?
Comme faire ?

$(this).nextAll('.boxFaq:eq(0)').toggle('slow')

Citation:

Envoyé par SpaceFrog

$(this).nextAll('.boxFaq:eq(0)').toggle('slow')

Nikel, Merci :ccool: