[RESOLU] Problème en javascript (jQuery)

Bonjour à tous,

Voilà j'ai créé un effet slideToggle, qui marche en cliquant sur la balise h3 qui correspond au texte que l'on veut déplier, mais je voudrais que lorsque le div texte sois déplier, les autres qui ont été déplier auparavant se referme, ect...

$("document").ready( function(){
	$("div.texte").css("display","none");
	$("h3").click( function(){
		$(this).next("div.texte").slideToggle("slow");
                /*if ( $(this).next("div.texte:visible").length != 0 ) { 
                         $(this).next("div.texte").slideUp("slow"); 
                }*/
	});

});

<h4>titre1</h4><h3>+</h3>
<div class="texte">texte1</div>
<hr>
<h4>titre2</h4><h3><a id="plus" href="#">+</a></h3>
<div class="texte">texte2</div>
<hr>
<h4>titre3</h4><h3>+</h3>
<div class="texte">texte3</div>

Modifié par tonymx15 (22 Jul 2010 - 09:16)

Je crois que tu t'es trompé de salon

Mettre un + ou - en h4, je trouve ça vilain.

Tu pourrais utiliser $(this).toggleClass('classe_avec_un_plus')
.classe_avec_un_plus affichant un background image de ton choix .
Modifié par paolo (21 Jul 2010 - 23:04)

En effet je me suis trompé de salon, si un modérateur passe par là il me déplacera bien le message...

Comme tu peux voir enfin si tu te rappelles j'essaye de rendre plus clair mon portfolio avec tes conseils dans mon topic précédent.

Screen : http://img825.imageshack.us/img825/6721/capturedcran20100721230.png
Modifié par tonymx15 (22 Jul 2010 - 08:46)

Bonjour,

Comme indiqué par paolo, l'utilisation d'un titre de niveau 4 dans ce cas n'est pas pertinent. Par contre, les liens restent nécessaires aux utilisateurs de clavier (prise de focus) donc la proposition du background-image n'est pas pertinente (à prohiber : les événements "click" sur des éléments ne pouvant être activés au clavier).

D'ailleurs dans un cadre idéal, ces liens devraient être générés en Javascript (prendre soin de conserver chaque contenu déplié par défaut).

Enfin, pour répondre à ta problématique, il te faut une variable conservant en mémoire le dernier contenu ayant été déplié (test conditionnel à faire pour vérifier l'état). Ainsi, tu pourras masquer au besoin.

Romain
Modifié par yodaswii (22 Jul 2010 - 10:39)

Merci, je ne préfère pas utiliser d'image, par contre je modifie la class du H3, je change le pointeur de la souris au passage sur H3...

Je comprend pas comment stocker dans une variable le dernier élément cliquer ? Comme ça ?

$("document").ready( function(){ 
    $("div.texte").css("display","none"); 
    $("h3").click( function(){  
             if ( $(this).next("div.texte:visible").length != 0 ) {  
                       $(this).next("div.texte").slideUp("slow");  
             }else{
                       $(this).next("div.texte").slideDown("slow");
             } 
    }); 
 
});

Modifié par tonymx15 (22 Jul 2010 - 11:22)

yodaswii a écrit :


Enfin, pour répondre à ta problématique, il te faut une variable conservant en mémoire le dernier contenu ayant été déplié (test conditionnel à faire pour vérifier l'état). Ainsi, tu pourras masquer au besoin.

Romain

Ou alors tout fermer avant d'ouvrir celui qui nous intéresse...

...
$("div.texte").hide();
$(this).next("div.texte").slideToggle("slow");
...

Comme ça sa peut être pas mal oui, j'essaye a 12h...
Modifié par tonymx15 (22 Jul 2010 - 12:28)

Ça ne marche pas en faisant comme ça :

$("document").ready( function(){ 
    $("div.texte").css("display","none"); 
    $("h3").click( function(){
    	$("div.texte").hide();
        $(this).next("div.texte").slideToggle("slow");
    });
});

<h4>titre1</h4><h3>+</h3>
<div class="texte">texte1</div>
<hr>
<h4>Sites webs réalisés par Anthony Cluse</h4><h3>+</h3>
<div class="texte">
<ul>
<li><a href="#">www.anthonycluse.fr</a></li>
<li><a href="#">www.anthonycluse.fr</a></li>
<li><a href="#">www.anthonycluse.fr</a></li>
</ul>
</div>
<hr>
<h4>Me contacter</h4><h3>+</h3>
<div class="texte">
Adresse email : <a href="mailto:anthonycluse@me.com">anthonycluse@me.com</a>.<br>
Adresse postale : Viers 15250, Naucelles.<br>
Tel : 06 80 43 86 81.
</div>
<hr>

Modifié par tonymx15 (22 Jul 2010 - 12:27)

autoedit.
Modifié par axel. (22 Jul 2010 - 12:32)

Je viens de trouver. Merci à tous.

$("document").ready( function(){ 
    $("div.texte").css("display","none"); 
    $("h3").click( function(){
    	$("div.texte:visible").slideUp("slow");
        $(this).next("div.texte:hidden").slideDown("slow");
        return false;
    });
});

Modifié par tonymx15 (23 Jul 2010 - 08:36)