Lien pour dérouler un texte

WRInaute occasionnel
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...
 
WRInaute impliqué
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.
 
WRInaute occasionnel
Merci pour ta réponse....

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

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
 
WRInaute accro
-http://ajax.googleapis.com/ajax/libs/jquery/ mouarf :D :roll: tu veux pas une pelle mécanique pour lever la chaise aussi ? :wink:

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

<div id="xxxx" style="display:none;">
       ... bla bla ....
</div>
Javascript
Code:
function masquemod(id){
   if(document.getElementById(id).style.display=='none'){
      document.getElementById(id).style.display='block';
   }else{
      document.getElementById(id).style.display='none';
   }
}
 
WRInaute occasionnel
@zeb merci!

ça fonctionne...!!! mais la question reste la même :D
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
 
WRInaute impliqué
Code:
<a href="" onclick="masquemod('xxxx');return false;" id="toogle">+/-</a>

Code:
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';
   }
}
 
WRInaute occasionnel
@baud74 merci ça fonctionne très bien... :wink: tu peux regarder sur la page en question... :D

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 ? :eek: :oops: :oops:
 
WRInaute accro
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.
Code:
<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>

Code:
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';
   }
}
 
WRInaute occasionnel
Merci Zeb :D
OK j'y suis presque, seulement que lorsqu'on clique sur Fermer, et bien ça ne se ferme pas...

Voici mon code

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>
 
WRInaute accro
Dans le premier "if" tu dois mettre == 'none' et pas = 'none', sinon c'est un assignement et pas une comparaison.
 
Discussions similaires
Haut