Plier / déplier du texte
DBS33
Messages postés
51
Date d'inscription
Statut
Membre
Dernière intervention
-
DBS33 Messages postés 51 Date d'inscription Statut Membre Dernière intervention -
DBS33 Messages postés 51 Date d'inscription Statut Membre Dernière intervention -
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".
A voir également:
- Plier / déplier du texte
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Texte barré whatsapp - Guide
- Mettre un texte en majuscule - Guide
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/
Deuxième alternative si tu ne veux pas t'embêter à séparer le début et la fin:
http://jsfiddle.net/r1erjqfy/1/
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
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>
ou sinon tu peux le mettre dans un fichier .js et l'appeler avec le code suivant:
<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>