11548 sujets

JavaScript, DOM et API Web HTML5

[Resolu]Probleme affichage de texte clique sur un span

bonjour a tous voila depuis quelque temps je veut faire un petit script en jquery mais en vain.J'arrive a cacher mon texte seul mais ce que je veut c'est lorsque l'on clique sur le H1 ou le span - le texte s'enroule (état déroulé au chargement de la page) en gros on arrive le texte est déroulé et le - est apparent. Donc mon script on clique sur moins il enroule et modifie le span en +.

le dom :

   	 <div id="content" >
	<img class="image" src="images/269685856.jpg" alt="image d'illustration" /> 
<h1> Bienvenue sur mon blog personnel <span id="plusmoins">-</span></h1>
	  <p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus, magna quis sagittis volutpat, enim felis rhoncus nisl eleifend blandit tortor erat vel nisi. Fusce lobortis dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus, magna quis sagittis volutpat, enim felis rhoncus nisl eleifend blandit tortor erat vel nisi. Fusce lobortis dignissim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus, magna quis sagittis volutpat, enim felis rhoncus nisl eleifend blandit tortor erat vel nisi. Fusce lobortis dignissim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utrhoncus, magna quis sagittis volutpat, enim felis rhoncus nisl eleifend blandit tortor erat vel nisi. Fusce lobortis dignissim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus, magna quis sagittis volutpat, enim felis rhoncus nisl eleifend blandit tortor erat vel nisi. Fusce lobortis dignissim.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rhoncus, magna quis sagittis volutpat, enim felis rhoncus nisl eleifend blandit tortor erat vel nisi. Fusce lobortis dignissim
	 </p>	
</div>


Voila si quelqu'un peut me donner cette solution que j'attends désespérément.En attendant merci a vous
Modifié par nux02160 (23 Nov 2011 - 12:35)
Salut,

fais un tour vers la fonction slideUp()/slideDown() pour le déroulage/roulage et vers la fonction html() pour remplacer le "-" par un "+".
Merci pour ta réponse mais je n'y connait rien en js j'ai simplement besoin pour un projet de faire cela.Pourrait tu m'aider a le faire s'il te plait.j'ai essayé cela mais ca ne fonctionne pas 

	   $(document).ready(function() {
 $("span#plusmoins").click(function (){
	 if ($("p#intro").is(":hidden")); {
	$(this).slideDown(2000);
$("span").html("+") ;
	 }
        else ($("p#intro").is(":visible")); {
     $(this).slideUp(2000);
$("span").html("-") ;

 }
}
	   });


Edit : si tu préfère individuellement j'ai compris le principe mais c'est la boucle qu'y n'as pas l'air de fonctionner
Modifié par nux02160 (23 Nov 2011 - 10:29)
A ta place j'utiliserai un toggle() pour qu'au premier click le menu se déroule (ou se s'enroule) et qu'au second ce soit l'inverse.

Ce qui te donnerai quelque chose du genre : 



$('span#plusmoin').toggle(function(){
  $(this).html('+')
  $('p#intro').slideUp(2000);
},function(){
  $(this).html('-')
  $('p#intro').slideDown(2000);
});


A vérifier l'emploi de la fonction toggle(), je ne suis pas sûr de bien l'avoir écrite ici Smiley smile
Modifié par Fahrenheit (23 Nov 2011 - 10:31)
J'en suis la mais la console m'indique une erreur de syntax des que je rajoute le else 

$("span#plusmoins").click(function (){
if ($("p#intro").is(":hidden")); {
$("p#intro").slideUp(2000);
$("span").html("+") ;
}
else ($("p#intro").is(":visible")); {
$("p#intro").slideDown(2000);
$("span").html("-") ;
}
});
je viens de coller ce que tu m'as donner mais cela fonctionne mais pas dans le document en lui meme

voila ce que j'ai mis dans les balises script 

	   $(document).ready(function() {
$('span#plusmoin').toggle(function(){

  $(this).html('+')

  $('p#intro').slideUp(2000);

},function(){

  $(this).html('-')

  $('p#intro').slideDown(2000);

});
});



Edit : oups cela fonctionne juste une erreur de frappe par contre en quoi le if/else n'est pas correcte si tu pouvait m'indiquer ou est mon erreur de syntax
Modifié par nux02160 (23 Nov 2011 - 10:49)
je pense que ton erreur de syntaxe vient du point virgule ici :

if ($("p#intro").is(":hidden"));



En soit, pour ce le genre de fonction dont tu as besoin il est très souvent plus simple et plus propre d'utiliser un toggle() plutôt qu'un if/else qui dépendent de conditions bien précises.
Toggle() permet d'effectuer un évènement puis son inverse.

De par mon expérience, les if/else sont bien souvent à l'origine de bugs pour les personnes qui comme toi et moi ne sont pas des ninjas du jQuery, qui bidouillent des conditions qui généralement s'appliquent mal !

A savoir, jQuery est plein de fonctions (comme toggle) qui te permettent de faire ce que tu veux sans galérer; il suffit généralement de chercher plus loin que ce qu'on connaît quitte à perdre 5 minutes.
Je te conseillerai de lire les commentaires des utilisateurs en dessous de l'explication de la fonction sur le site jQuery. C'est généralement une bonne source d'inspiration quant aux fonctions les plus aptes à êtres utilisées pour tes scripts.

Pour ce qui est de la faute de frappe, l'erreur me revient =P
Merci a toi effectivement l'erreur vient du ; mais je ne pige pas pourquoi en plus le script ne fonctionne pas non plus.merci pour le complément si quelqu'un peut me faire fonctionner mon if/else afin d'avancer avec jquery sa serait trés sympa.En attendant merci a vous.
Ça vient peut-être du fait que tu as mit une condition à ton else alors que tu n'es pas censé le faire sauf si tu utilises un else if.

un if/else s'applique ainsi :


if(condition){

}else if (condition){

}else{

};


Mais je suis loin d'être certain que l'erreur vient de là.
Modifié par Fahrenheit (23 Nov 2011 - 12:19)
c'est tu ou il y a une doc qui parle des conditions en jquery ?

Merci a toi la structure il else fonctionne maintenant

voila le code si sa peut servir 
$("span#plusmoins").click(function (){
if ($("p#intro").is(":visible")) {
$("p#intro").slideUp(2000);
$("span").html("+") ;
}
else  {
$("p#intro").slideDown(2000);
$("span").html("-") ;
}
});

Modifié par nux02160 (23 Nov 2011 - 12:30)
Sujet clos
Aller à