Lien pour dérouler un texte

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par linkfacile, 23 Octobre 2014.

  1. linkfacile
    linkfacile WRInaute occasionnel
    Inscrit:
    10 Octobre 2012
    Messages:
    282
    J'aime reçus:
    0
    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...
     
  2. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    586
    J'aime reçus:
    0
    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.
     
  3. linkfacile
    linkfacile WRInaute occasionnel
    Inscrit:
    10 Octobre 2012
    Messages:
    282
    J'aime reçus:
    0
    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
     
  4. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    -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';
       }
    }
     
  5. linkfacile
    linkfacile WRInaute occasionnel
    Inscrit:
    10 Octobre 2012
    Messages:
    282
    J'aime reçus:
    0
    @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
     
  6. baud74
    baud74 WRInaute impliqué
    Inscrit:
    21 Juillet 2014
    Messages:
    586
    J'aime reçus:
    0
    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';
       }
    }
     
  7. linkfacile
    linkfacile WRInaute occasionnel
    Inscrit:
    10 Octobre 2012
    Messages:
    282
    J'aime reçus:
    0
    @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:
     
  8. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 196
    J'aime reçus:
    1
    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';
       }
    }
     
  9. linkfacile
    linkfacile WRInaute occasionnel
    Inscrit:
    10 Octobre 2012
    Messages:
    282
    J'aime reçus:
    0
    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>
    
    
     
  10. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 734
    J'aime reçus:
    233
    Dans le premier "if" tu dois mettre == 'none' et pas = 'none', sinon c'est un assignement et pas une comparaison.
     
  11. linkfacile
    linkfacile WRInaute occasionnel
    Inscrit:
    10 Octobre 2012
    Messages:
    282
    J'aime reçus:
    0
    Ca fonctionne!!!! C'est super!

    Je vous remercie tous pour m'avoir aidé sur ce point, je vous dois ça :eek: :D :D
     
Chargement...
Similar Threads - Lien dérouler Forum Date
Pages Avis clients : à désindexer ou pas ? e-commerce Lundi à 18:12
Site bizarre fait des liens vers mon site Netlinking, backlinks, liens et redirections 16 Août 2019
Comment Google peut prendre un compte des liens aussi pourris.... Netlinking, backlinks, liens et redirections 9 Août 2019
Liens externes et Google Netlinking, backlinks, liens et redirections 27 Juillet 2019
lien vers rien ou page vide à créer Rédaction web et référencement 5 Juillet 2019
Lien vers la homepage Netlinking, backlinks, liens et redirections 4 Juillet 2019
wordpress, indexation, liens re écrits Débuter en référencement 4 Juillet 2019
netlinking : 20 règles à connaître sur les liens Netlinking, backlinks, liens et redirections 2 Juillet 2019
WordPress Lien pirate et 410 Débuter en référencement 28 Juin 2019
Nettoyer les liens "pirates" de Google Débuter en référencement 21 Juin 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice