Discussion :

[novis5]

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

[Invité]

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"

[novis5]

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

[Invité]

Bien sûr.
Essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Abracadabra

[novis5]

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?

[Invité]

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.