Plier / déplier du texte

Fermé

DBS33 Messages postés 51 Date d'inscription jeudi 24 septembre 2015 Statut Membre Dernière intervention 8 avril 2016 - 21 nov. 2015 à 13:17
DBS33 Messages postés 51 Date d'inscription jeudi 24 septembre 2015 Statut Membre Dernière intervention 8 avril 2016 - 25 nov. 2015 à 15:42

Bonjour,
Je cherche une solution pour pouvoir afficher dans un weblog une partie de texte sur 3 à 4 lignes d'un texte en contenant une dizaine. L'utilisateur aura qu'à cliquez sur "lire la suite" pour voir tout et une fois lu cliquez sur "replier".

A voir également:

Plier / déplier du texte
Excel cellule couleur si condition texte - Guide
Transcription audio en texte word gratuit - Guide
Mettre un texte en majuscule - Guide
Copier texte pdf - Guide
Texte barré whatsapp - Guide

3 réponses

Réponse 1 / 3

Tomy2e Messages postés 816 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 18 août 2016 858
Modifié par Tomy2e le 22/11/2015 à 02:43

Bonjour, voila un petit exemple basique en JavaScript: http://jsfiddle.net/vqgudgmy/
Deuxième alternative si tu ne veux pas t'embêter à séparer le début et la fin:
http://jsfiddle.net/r1erjqfy/1/

DBS33 Messages postés 51 Date d'inscription jeudi 24 septembre 2015 Statut Membre Dernière intervention 8 avril 2016
22 nov. 2015 à 16:59

bonjour et merci de ta réponse. J'ai oublié de préciser quelque chose d'important. Je suis nouveau né dans ce domaine. Je crois comprendre que le html je le met dans mon weblock qui contien mon texte. Le css je crois devoir le mettre dans ma feuille de style css, mais le javascript je vois pas ou le mettre.

Tomy2e Messages postés 816 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 18 août 2016 858
22 nov. 2015 à 17:21

Pour le JavaScript tu as deux options, tu peux le mettre dans ton HTML entre les balises

<script></script>

ou sinon tu peux le mettre dans un fichier .js et l'appeler avec le code suivant:

<script type="text/javascript" src="emplacementduscript.js"></script>

DBS33 Messages postés 51 Date d'inscription jeudi 24 septembre 2015 Statut Membre Dernière intervention 8 avril 2016
22 nov. 2015 à 19:53

voilà ce que j'ai mis dans mon html. Mais ca marche pas. J'ai remplacé pour mieux identifié "texte" pas "textePliDepli" idem dans le CSS.

<div id="textePliDepli">Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
Test<br />
</div> <a href="#" onclick="voirsuite();" id="voirsuite">Voir la suite...<br />
</a><a href="#" onclick="replier();" style="display:none;" id="replier">Replier...</a>
<script>
function voirsuite()
{
document.getElementById('voirsuite').style.display = 'none';
document.getElementById('textePliDepli').style.height='100%';
document.getElementById('replier').style.display='block';
}
function replier()
{
document.getElementById('voirsuite').style.display='block';
document.getElementById('textePliDepli').style.height='75px';
document.getElementById('replier').style.display='none';
}
</script>

Réponse 2 / 3

Tomy2e Messages postés 816 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 18 août 2016 858
22 nov. 2015 à 20:02

Qu'est-ce qui ne marche pas ? J'ai remplacé le 100% par "auto" dans le JavaScript, pour éviter que la div ne prenne tout la largeur de l'écran vu que j'ai placé le code directement dans mon <body>, autrement tout fonctionne bien si je place ça dans un document HTML:

<div id="textePliDepli">Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
Test<br /> 
</div>
<a href="#" onclick="voirsuite();" id="voirsuite">Voir la suite...<br /></a>
<a href="#" onclick="replier();" style="display:none;" id="replier">Replier...</a>
<script> 
function voirsuite() 
{ 
document.getElementById('voirsuite').style.display = 'none'; 
document.getElementById('textePliDepli').style.height='auto'; 
document.getElementById('replier').style.display='block'; 
} 
function replier() 
{ 
document.getElementById('voirsuite').style.display='block'; 
document.getElementById('textePliDepli').style.height='75px'; 
document.getElementById('replier').style.display='none'; 
} 
</script>
<style>
#textePliDepli
{
    height:75px;
    overflow-y:hidden;
}
</style>

Réponse 3 / 3

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
22 nov. 2015 à 20:12

Bonjour,

Et le "même" code simpifié
- 1 Seul bouton
- 1 Seule fonction

<html> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
 <title>test</title>
 </head>
  <body>
<style>
#textePliDepli
{
    height:75px;
    overflow-y:hidden;
}
</style>

<div id="textePliDepli">Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
	Test<br /> 
</div>
<a href="#" onclick="plierreplier();" id="voirsuite">Voir la suite...<br /></a>
 
  </body>
 </html>
 
 <script type="text/javascript">
function plierreplier() { 
  var voirsuite = document.getElementById('voirsuite');
  var textePliDepli = document.getElementById('textePliDepli');
 
  if( textePliDepli.style.height != 'auto'){
   //On déplie
   voirsuite.innerHTML = 'Replier...';
   textePliDepli.style.height='auto'; 
  }else{
   //on masque
   voirsuite.innerHTML = 'Voir la suite...<br>';
   textePliDepli.style.height='75px'; 
  }
 }
</script>

DBS33 Messages postés 51 Date d'inscription jeudi 24 septembre 2015 Statut Membre Dernière intervention 8 avril 2016
23 nov. 2015 à 09:02

Merci ça fonctionne. Juste un petit problème. Quand je clique sur "voir la suite" l'affichage ne reste pas sur la zone mais remonte automatiquement en haut de page. Il faut donc revenir sur la zone de lecture. C'est pareil pour "replier".

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
23 nov. 2015 à 11:14

Salut,
Remplace le lien a par un bouton :

<button onclick="plierreplier();" id="voirsuite">Voir la suite...</button>

Bonne journée

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
23 nov. 2015 à 11:26

Ou enlève le href ça devrait suffir

<a  onclick="plierreplier();" id="voirsuite">Voir la suite...<br /></a>

DBS33 Messages postés 51 Date d'inscription jeudi 24 septembre 2015 Statut Membre Dernière intervention 8 avril 2016
23 nov. 2015 à 20:49

Bonsoir et merci. Cela fonctionne avec le bouton mais pas en supprimant le href... à moins que j'ai fait une boulette

Tomy2e Messages postés 816 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 18 août 2016 858
Modifié par Tomy2e le 23/11/2015 à 21:07

Mets un return false après l'appel de la fonction, comme ça tu gardes le style d'un lien:

<a href="#" onclick="plierreplier();return false;" id="voirsuite">Voir la suite...<br /></a>

Discussions similaires

adele

avantages et inconvénients du téléphone portable

[Excel] Recherche de Texte avec RechercheV

Excel si cellule contient texte alors...

copie de texte