Discussion :

[Asdorve]

Bonjour,

J'ai mis sur ma page le script suivant:

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
$(document).ready(function() {
    // On lance la boucle sur tous les H3
    $('h3').each(function() {
        // On masque le paragraphe qui suit
        $(this).next('p').toggleClass("invisible");
        // On copie le style des balises A
        var couleurLien = 'black';
        $(this).css({
            "text-decoration": "underline",
            "color": couleurLien,
            "cursor": "pointer"
        });
        // A chaque clic, on bascule l"état de l"élément P suivant
        $(this).click(function() {
            $(this).next('p').toggleClass("invisible");
        });
    });
})

Lorsque sur ma page j'ai ceci:

Code html :

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

1
2
<H3>Question 1</H3>
<P>Réponse 1 </P>

le paragraphe est bien caché. Un clic sur "Question 1" m'affiche ou me cache le paragraphe.

Par contre, quand je suis dans cette configuration:

Lorsque sur ma page j'ai ceci:

Code html :

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

1
2
3
4
<H3>Question 1</H3>
<P>Réponse 1 
<TABLE>....</TABLE>
</P>

"Réponse 1" est bien caché, mais le tableau est visible.

Qu'est-ce qui ne va pas dans le code?

Merci d'avance

Xavier

[Sodium]

Il faut mettre la classe sur le tableau, il ne va pas disparaître par magie.

[Asdorve]

Mais à partir où je fais disparaitre le paragraphe, le contenu n'est-il pas censé disparaitre?

Comment appliquer la classe au tableau dans ma fonction?

[NoSmoking]

Bonjour,
structurellement ta construction n'est pas conforme, un élément <p> ne peut pas contenir un élément <table>, le navigateur fera donc le ménage.

Code html :

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

1
2
3
4
<p>
    <table>
    </table>
</p>

sera corrigé comme

Code html :

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

1
2
<p></p>
<table></table>

Le mieux que tu ais à faire est d'utiliser un élément neutre comme une <div>.

Code html :

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

1
2
3
4
<div>
    <table>
    </table>
</div>

[Asdorve]

Je comprends mieux, j'ai mis des div et changé la toggleclass par un hidden, ça fonctionne parfaitement.

Merci pour votre aide.

Xavier