Sujet Précédent Sujet Suivant

Soucis en Jquery / Toggle

Résolu/Fermé
Utilisateur anonyme - 3 août 2012 à 10:25
 Utilisateur anonyme - 3 août 2012 à 14:19
Bonjour à tous ^^,

Aujourd'hui c'est moi qui pose une question :p

Alors voici mon appel JQuery : 

$premierePartie=substr($programme->getAccesAuProgramme(), 0, 245);
				$deuxiemePartie=substr($programme->getAccesAuProgramme(),245);
				echo "<p><b>Accès au programme</b> : ";
				echo $premierePartie.'<span class="plus-d-acces"><a class="closed plusdacces" href="#"><span class="do-open" style="display:inline;visibility:visible;">Plus d\'accès</span><span class="do-close" style="display:none;visibility:hidden;">Moins d\'accès</span></a></span><br />';
				echo "<span class='a_cacher' style='display:none;visibility:hidden;'>".$deuxiemePartie."</span></p>";


Et voici ma fonction JQuery : 

<script type="text/javascript">
			$(function(){
				$(".plusdacces").click(function () {
					var $this = $(this) ;
					$this.closest('a').next('span').slideToggle();//closest('h2')
					$this.toggleClass('opened closed') ;
				});
			});

		</script>



Dans l'idée, dérouler la deuxième partie de texte quand on clique sur "Plus d'accès", par la suite, pourvoir la réenrouler en cliquant sur "Cacher"... Jusque là rien de bien compliqué...

Mon jolie lien est bien "connecté" puisqu'en cliquant dessus, si je met un magnifique "alert('ok');", il me fait bien une alerte....

Le Jquery étant en cours d'acquisition pour mon cerveau ^^, je sais que " $this.closest('a')" ne va pas du tout, j'ai test "$this.closest('span')" mais bien évidement, c'est pas mieux...

Quelqu'un pour m'aider ?

Merci


3 réponses

Réponse 1 / 3
kangouroux Messages postés 580 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 28 février 2013 37
3 août 2012 à 11:09
Je ne sais pas si cela peut corriger ton soucis, mais personnellement que je souhaite animer une page je fais usage de la fonction animate de Jquery ^^

$('span').animate({height:'100px''},{queue:false,duration:300});

Dans ton css tu mets un petit overflow: hidden, pour que le texte reste ne dépasse pas le contenant.

Pour afficher le reste du texte :

$('span').animate({height:'500px''},{queue:false,duration:300});
0
Réponse 2 / 3
kangouroux Messages postés 580 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 28 février 2013 37
3 août 2012 à 11:20
Et pour le toggle :

$("#boutton").toggle(function(){
$("#cachecache","#Roller").stop().animate({height:"500px"},{queue:false,duration:500});
}, function() { $("#cachecache","#Roller").stop().animate({height:"100px"},{queue:false,duration:500});
});
0
Réponse 3 / 3
Utilisateur anonyme
3 août 2012 à 11:30
Hum merci mais je suis "obligé" d'utiliser ".slideToggle()" <= norme.

En corrigeant ainsi : 
echo "<p><b>Accès au programme</b> : ";
				echo $premierePartie.'<h3 class="plus-d-acces"><a class="closed plusdacces" href="#"><span class="do-open" >Plus d\'accès</span><span class="do-close" >Moins d\'accès</span></a></h3><br />';
				echo "<span class='a_cacher'>".$deuxiemePartie."</span></p>";


J'ai mon tit span Afficher/cacher qui change, mais le span "a-cacher" ne se déroule pas..... c'est trop bête >< c'est une veille erreur d'inattention mais là je vois tellement pas ><
0
kangouroux Messages postés 580 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 28 février 2013 37
3 août 2012 à 11:43
dans ton echo tu retourne un "a_cacher" et non un "a-cacher" ...
Je fait un teste avec la fonction dont tu me parle et je te redis ça ^^
0
Utilisateur anonyme
3 août 2012 à 11:44
Oui, erreur de réécriture ^^ :p

Merci :)
0
kangouroux Messages postés 580 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 28 février 2013 37
3 août 2012 à 11:57
Est-il possible d'avoir le code source de toute la page ? j'ai besoin d'avoir le code HTML merci :)
0
Utilisateur anonyme
3 août 2012 à 12:18 
<html>
   <head>
             <script type="text/javascript">
			$(function(){
				$(".plusdacces").click(function () {
					var $this = $(this) ;
					$this.closest('h3').next('span').slideToggle();//closest('h2')
					$this.toggleClass('opened closed') ;
				});
			});

		</script>
   </head>
   <body>
<?php
    $premierePartie=substr($programme->getAccesAuProgramme(), 0, 248);
    $deuxiemePartie=substr($programme->getAccesAuProgramme(),248);
?>
                           <p>
					<b>Accès au programme</b> : 
					<?=$premierePartie; ?>
					<h3 class="plus-d-acces">
						<a class="closed plusdacces" href="#">
							<span class="do-open" >Plus d'accès</span>
							<span class="do-close" >Moins d'accès</span>
						</a>
					</h3>
					<span class='a_cacher'><?=$deuxiemePartie; ?></span>
				</p>

   </body>
</html>



css: 

.plus-d-acces a{color : #E40C00 ; text-decoration : underline}
.opened span.do-open  {display : none}
.opened span.do-close {display : block}
.closed span.do-open  {display : block}
.closed span.do-close {display : none}
.a_cacher {display : none}



J'ai débuggé un peu, actuellement, les Afficher/cacher change, et le sapn "a_cacher" s'ouvre correctement....par contre, il me rafraichit la page et remonte, ce qui retire tout l'interet du toggle....
0
kangouroux Messages postés 580 Date d'inscription vendredi 20 juin 2008 Statut Membre Dernière intervention 28 février 2013 37
3 août 2012 à 13:51
pour ne pas rafraichir la page tu return false; à la fin de ton click ;) c'est magique tu verra
0

Discussions similaires

Supprimer Toggle Navigation
Argant1800 -
Malekal_morte- -

6 réponses
[Navigation Internet] Trace de navigation
Cyril -
megot encore fumant -

10 réponses
Comment supprimer l'option "Navigation privée"
Error_ -
zemamangeek -

3 réponses
Barre de navigation outlook
Lk14 -
bpaitste91190 -

3 réponses
La navigation privée, ne laisse aucune trace?
luciella -
kacem312011 -

4 réponses