Plier / déplier du texte
DBS33
Messages postés
52
Statut
Membre
-
DBS33 Messages postés 52 Statut Membre -
DBS33 Messages postés 52 Statut Membre -
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".
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".
3 réponses
-
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/-
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.
-
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>
-
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>
-
-
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> -
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>
