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:
    279
    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:
    580
    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:
    279
    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 024
    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:
    279
    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:
    580
    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:
    279
    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 024
    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:
    279
    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:
    9 163
    J'aime reçus:
    338
    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:
    279
    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
Lien dans la description d'une vidéo YouTube...quel est prix raisonnable par mois ? YouTube, Google Images et Google Maps 16 Juin 2022
Liens en do follow ou no follow pour créditer les images ? Netlinking, backlinks, liens et redirections 14 Mai 2022
Redirection 404 via le .htaccess / pb avec les liens relatifs Débuter en référencement 5 Mai 2022
Ajouter des liens sortants externes pour améliorer le référencement Netlinking, backlinks, liens et redirections 2 Mai 2022
Modification de lien (YoutTube vers article blog) Netlinking, backlinks, liens et redirections 1 Mai 2022
Connexion au compte Google Search Console d'un client Google : l'entreprise, les sites web, les services 28 Avril 2022
Des avis sur mon site svp et échange de lien possible Demandes d'avis et de conseils sur vos sites 28 Avril 2022
liens de shopping AdSense AdSense 1 Avril 2022
Search Console Bannir des liens entrants de certains pays Netlinking, backlinks, liens et redirections 21 Mars 2022
Pose de liens : Besoin d'aide d'ordre technique et besoin d'éclairage Netlinking, backlinks, liens et redirections 9 Mars 2022
Comment obfusquer un lien sur Wordpress ? Développement d'un site Web ou d'une appli mobile 3 Mars 2022
WordPress redirection de liens WP qui se font tout seul Demandes d'avis et de conseils sur vos sites 17 Février 2022
Liens et sous-domaine Netlinking, backlinks, liens et redirections 25 Janvier 2022
Liens toxiques sous semrush Netlinking, backlinks, liens et redirections 24 Janvier 2022
Liens NoFollow mais visible dans Google Search Console? Débuter en référencement 11 Janvier 2022
Ancre de lien ou bouton Débuter en référencement 7 Janvier 2022
Menu, liens et maillage du site Débuter en référencement 6 Janvier 2022
Ancre de lien sur bloc de texte Débuter en référencement 6 Janvier 2022
Problème sur de l'obfuscation de liens avec webflow Développement d'un site Web ou d'une appli mobile 4 Janvier 2022
Ouvrir 2 liens en avec un seul Développement d'un site Web ou d'une appli mobile 22 Décembre 2021