Soucis en Jquery / Toggle

Résolu
pandorz -  
 pandorz -
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



--
Quand la vie apporte des questions, Google donne les réponses.
Les logiciels sont comme le sexe ; meilleurs quand c'est gratuit.

3 réponses

  1.
    kangouroux Messages postés 609 Statut Membre 37
     
    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
  2. kangouroux Messages postés 609 Statut Membre 37
     
    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
  3. pandorz
     
    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
    1. kangouroux Messages postés 609 Statut Membre 37
       
      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
    2. pandorz
       
      Oui, erreur de réécriture ^^ :p

      Merci :)
      0
    3. kangouroux Messages postés 609 Statut Membre 37
       
      Est-il possible d'avoir le code source de toute la page ? j'ai besoin d'avoir le code HTML merci :)
      0
    4. pandorz
        
      <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
    5. kangouroux Messages postés 609 Statut Membre 37
       
      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 privée et navigation "normale"
Guilhot -
Guilhot -

13 réponses
comment désactiver la Navigation privée
cricri13 -
HelpiOS -

1 réponse
Comment annuler navigation privée sur safari iPad.
Magic45 -
Pluton_3973 -

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

3 réponses