Lien pour dérouler un texte

[linkfacile]

Bonjour à tous,

je cherche à faire dérouler un texte quand on clique sur un lien, j'ai réussi mais maintenant je voudrais que le texte disparaisse lorsque je le déroule et en suite pouvoir fermer avec une croix ou avec un texte fermer.

Voici ce que ça donne sur mon site: (URL supprimée)

Est-ce que quelqu'un ici aurait la gentillesse de m'aider?

Merci d'avance et bonne journée à vous tous...

 

[baud74]

au chargement de la page, le texte est visible.
il faut donc changer ces propriétées css pour qu'il ne soit pas visible au chargement, sinon le texte "En savoir plus" n'a aucun sens car on en sait déjà plus.
un click sur ce texte change l'état. en l'état, le texte visible devient invisible. et si l'on clique une seconde fois, le texte invisible redevient visible.
il faudrait rajouter un changement de l'inititulé du texte sur lequel on clique pour mettre "En savoir plus" au chargement de la page et "Fermer" (ou autre terme) quand on a affiché le texte.

 

[linkfacile]

Merci pour ta réponse....

Je n'y arrive pas voici mon code...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="../site/Toogle/toggle.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
return false;
})
});
</script> <style>
.fader{opacity:0;display:none;}
</style> <a href="#" class="fadeNext">En savoir Plus</a>
<div style="opacity: 1; display: block;" class="fader">texte blabla
</div>

Je ne sais pas comment faire

 

[zeb]

-http://ajax.googleapis.com/ajax/libs/jquery/ mouarf :roll: tu veux pas une pelle mécanique pour lever la chaise aussi ? :wink:

HTML

<a href="" onclick="masquemod('xxxx');return false;">+/-</a>

<div id="xxxx" style="display:none;">
       ... bla bla ....
</div>

Javascript

function masquemod(id){
   if(document.getElementById(id).style.display=='none'){
      document.getElementById(id).style.display='block';
   }else{
      document.getElementById(id).style.display='none';
   }
}

 

[linkfacile]

@zeb merci!

ça fonctionne...!!! mais la question reste la même
comment faire pour que, lors du déroulage du texte, la partie ou l'on clique ici +- disparaisse et qu'on puisse fermer avec un mot fermer ou x

 

[baud74]

<a href="" onclick="masquemod('xxxx');return false;" id="toogle">+/-</a>

function masquemod(id){
   if(document.getElementById(id).style.display=='none'){
      document.getElementById(id).style.display='block';
      document.getElementById('toogle').innerHTML='fermer';
   }else{
      document.getElementById(id).style.display='none';
      document.getElementById('toogle').innerHTML='ouvrir';
   }
}

 

[linkfacile]

@baud74 merci ça fonctionne très bien... :wink: tu peux regarder sur la page en question...

j'ai une dernière question...comment faire pour que le mot Fermer qui apparaît en lien soit en bas du texte et ne pas en haut ?

 

[zeb]

Tu met deux liens avec deux id distincts et tu "display none" le premier a l'ouverture tout en le remettant "display block" a la fermeture.

<a href="" onclick="masquemod('xxxx');return false;" id="toogle1"> En savoir Plus</a>

<div id="xxxx" style="display:none;">
       ... bla bla ....
       <a href="" onclick="masquemod('xxxx');return false;" id="toogle2">Fermer</a>
</div>

function masquemod(id){
   if(document.getElementById(id).style.display=='none'){
      // ouverture div
      document.getElementById(id).style.display='block';
      document.getElementById('toogle1').style.display='none';
   }else{
      // fermeture div
      document.getElementById(id).style.display='none';
      document.getElementById('toogle1').style.display='block';
   }
}

 

[linkfacile]

Merci Zeb
OK j'y suis presque, seulement que lorsqu'on clique sur Fermer, et bien ça ne se ferme pas...

Voici mon code

Mon texte du début...

<script type="text/javascript">

function masquemod(id){
if(document.getElementById(id).style.display='none'){
// ouverture div
document.getElementById(id).style.display='block';
document.getElementById('toogle').style.display='none';
}else{
// fermeture div
document.getElementById(id).style.display='none';
document.getElementById('toogle').style.display='block';
}
}
</script>

<style>
.fader{opacity:0;display:none;}
</style> 

<span id="toggle"> <a href="" onclick="masquemod('xxxx');return false;" id="toogle">En savoir Plus</a></span>
<div id="xxxx" style="display: none;">

Mon blabla à cacher

<a href="" onclick="masquemod('xxxx');return false;" id="toogle2">Fermer</a><br><p></p>

</div>

 

[spout]

Dans le premier "if" tu dois mettre == 'none' et pas = 'none', sinon c'est un assignement et pas une comparaison.

 

[linkfacile]

Ca fonctionne!!!! C'est super!

Je vous remercie tous pour m'avoir aidé sur ce point, je vous dois ça