1. #1
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 73
    Points : 14
    Points
    14

    Par défaut Insérer un lien "lire la suite"

    Bonjour,

    J'ai crée sur mon site tout un paragraphe et afin que cela soit plus léger visuellement, j'ai inséré un lien "lire la suite" et "masquer" où le texte apparaît et disparaît selon le souhait du visiteur. Seulement le rendu n'est pas exactement comme je le souhaite. Lorsque l'on clique sur "lire la suite" toute la page bouge afin que la suite du texte apparaisse tout en haut . puis lorsque l on clique sur "masquer" cela nous ramène tout en haut de la page.
    Moi je souhaiterai que cela ne s'applique seulement sur le texte et notamment sur le bas du texte.
    J'ai trouvé un exemple sur ce site: https://www.johnbeckley.com/fr/cat/art-numerique/

    pour info; mon code de base était:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <div>Ton texte visible<a href="#cache"> [Lire la suite] </a></div>
    <div id="cache">La suite du texte<a href=""> [Voir moins]</a></div>

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #cache {
       display: none;
    }
    #cache:target {
       display: block;
    }

    Merci de votre aide car je ne vois pas du tout ce que je peux modifier...

    Novis

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Bonjour,

    si on regarde* le code de l'exemple que tu donnes, il s'agit de JavaScript :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <a href="#" onclick="showhide_toggle('pressrelease', 6246, 'Lire la suite (252 mots supplémentaires)', 'Masquer le texte'); return false;" aria-expanded="false"><span id="pressrelease-toggle-6246">Lire la suite (252 mots supplémentaires)</span></a>
     
    <span id="pressrelease-toggle-6246">Lire la suite (252 mots supplémentaires)</span>
     
    <div id="pressrelease-content-6246" class="sh-content pressrelease-content sh-hide" style="display: none;">
    ....
    </div>
    * inspecteur de fichier : "Clic droit" -> "Afficher l'élément" (sur Firefox)

    • "JavaScript afficher / masquer div au clic"
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 73
    Points : 14
    Points
    14

    Par défaut

    Bonjour,

    Merci pour votre réponse.

    Connaissez vous un code avec les mêmes fonctions mais qui ne serait que en css?

    Merci pour votre aide

    novis

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Bien sûr.
    Essaye :

    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre à l'essai
    Femme Profil pro
    peintre
    Inscrit en
    août 2017
    Messages
    73
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : peintre

    Informations forums :
    Inscription : août 2017
    Messages : 73
    Points : 14
    Points
    14

    Par défaut

    Mort de rire!!

    Bon comme vous l'aurez constaté, je n'y connais pas grand chose donc je demandais au cas où.

    Et autre question quitte à vous prendre pour un magicien... pourquoi pas...
    En se basant sur mon code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #cache {
       display: none;
    }
    #cache:target {
       display: block;
    }
    Est-il possible d'ouvrir le lien sans bouger le haut du texte?

    Merci de m'éclairer sur les possibilités de vos pouvoirs magiques

    novis

    nb: Si non, comment insérer le code js de l'exemple qui m'intéresse? Comment composer le html?
    autre question de débutant... comment trouver les codes de cet exemple?

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 586
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 586
    Points : 21 194
    Points
    21 194

    Par défaut

    Désolé, point de magie ici...


    voici 3 façons de faire : https://codepen.io/jreaux62/pen/RjPGvb

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <h4>Méthode 1</h4>
    <article>
      <div>
        Voici le début de l'article 1....
      </div>
      <div id="test-1" style="display:none">
        Hello ! Ceci est la suite de l'article 1 !
      </div>
      <button type="button" onclick="toggle_div(this,'test-1');" title="Afficher la suite">+</button>
    </article>
     
    <h4>Méthode 2</h4>
    <article>
      <div>
        Voici le début de l'article 2....
        <div id="test-2" style="display:none">
          Hello ! Ceci est la suite de l'article 2 !
        </div>
        <button type="button" onclick="toggle_div(this,'test-2');" title="Afficher la suite">+</button>
      </div>
    </article>
     
    <h4>Méthode 3</h4>
    <article>
      <div>
        Voici le début de l'article 3....
        <button type="button" onclick="toggle_div(this,'test-3');" title="Afficher la suite">+</button>
      </div>
      <div id="test-3" style="display:none">
        Hello ! Ceci est la suite de l'article 3 !
      </div>
    </article>
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <script>
    function toggle_div( btn, id_div )
    {
      btn.innerHTML = (btn.innerHTML == '+')? '-' : '+';
      btn.title = (btn.title == 'Afficher la suite')? 'Masquer la suite' : 'Afficher la suite';
      document.getElementById( id_div ).style.display = (document.getElementById( id_div ).style.display == 'none')? 'block' : 'none';
    }
    </script>

    N.B. Le fait qu'avec ton code on remonte la page, c'est dû au fait qu'en cliquant sur un lien <a> avec un href contenant une ancre (#.....) :
    • <a href="#uneancre"... > : on recharge la page puis on descend jusqu'à l'élément avec id="uneancre"
    • <a href="#"... > : on recharge juste la page (ancre vide)


    C'est pouquoi j'ai utilisé des <button>

    Cela dit, on peut quand même utiliser des liens <a> :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <h4>Méthode 4</h4>
    <article>
      <div>
        Voici le début de l'article 4....
        [<a onclick="toggle_div(this,'test-4'); return false;" title="Afficher la suite">+</a>]
      </div>
      <div id="test-4" style="display:none">
        Hello ! Ceci est la suite de l'article 4 !
      </div>
    </article>
    return false; (JavaScript) évite justement de "soumettre le lien" donc évite de recharger la page.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. Réponses: 4
    Dernier message: 26/04/2016, 11h06
  2. Implémenter un lien "Lire la suite"
    Par CinePhil dans le forum jQuery
    Réponses: 7
    Dernier message: 14/06/2013, 02h06
  3. lien "lire la suite" dans drupal
    Par mwane dans le forum Drupal
    Réponses: 1
    Dernier message: 24/05/2011, 14h58
  4. Réponses: 4
    Dernier message: 01/08/2006, 13h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo