Plier / déplier du texte
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.
-
-
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> -
ModérateurBonjour,
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>
