Afficher la suite (agrandir un div) [Résolu/Fermé]

Signaler
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
 -
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
 -
Salut à tous,

Voilà, je suis en train de faire une page de petites annonces mais je souhaite masquer une partie de la description si elle est trop longue.

Le top serait d'avoir un lien "Afficher la suite" sur lequel on clique pour que la div s'agrandisse.

En fait, ce n'est pas compliqué, je voudrais avoir le même système que sur ce forum, quand le message est trop long, il y a "Afficher la suite" qui se mets en place et lors du clic, ce texte disparaît.

D'avance merci pour votre aide !

Julien

5 réponses

Réponse 1 / 5
Messages postés
32095
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 avril 2021
 3 406
Bonjour,

A l'arrache : 
<!DOCTYPE html>
<html>
 <head>
  <title> TEST </title>
  <style>
    .madiv
		{
		  background-color: #fba576 ;
      position:relative;
		  color: rgb(0,165,226);
		  border: 3px rgb(0,165,226) solid;
		  border-radius: 10px;
		  width: 200px;
      height:40px;
      max-height:40px;
       overflow: hidden;
		}

	
  </style>
 </head>
 <body>
 
 
   <div class="madiv" id="m_div1">
      <span style="float:right; position:absolute;bottom:0;right:3px" onclick="agrandiroureduire()">[...]</span>
      <pre style="float:left; width:100px">
      ceici est du texte sur plusieurs lignes
       ligne 2
       ligne 3
       ligne 4
       ligne 5
       ligne 7
       ligne 8
       ligne 9
      </pre>
      
  </div> 
 
<script type="text/javascript"> 
function agrandiroureduire(){
  var ladiv = document.getElementById('m_div1');
  if(ladiv.style.maxHeight == "none"){
    ladiv.style.maxHeight = "40px";
    ladiv.style.height = "40px";
  }else{
    ladiv.style.maxHeight = "none";
    ladiv.style.height = "auto";
  }
  
}
 </script>
 </body>
</html>

Réponse 2 / 5
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
Rapide ! Merci je teste cela demain... Dire que j'ai passé des heures pour fabriquer un script et qui n'est pas au point...
Réponse 3 / 5
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
Je viens de tester ton script.

C'est déjà du style de tout ce que j'ai pu trouvé. Ce qu'il me manque c'est de n'avoir la possibilité d'étendre la div uniquement quand il y a besoin, s'il n'y a qu'une ligne pas besoin.

Egalement que le texte sur lequel on clique disparaisse après avoir cliqué dessus.

Voici ce que j'ai fais pour l'instant mais je ne suis pas encore arrivé à ce que je souhaite. 

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>test</title>
	<style type="text/css">
        #exemple {
            margin: 20px 0;
            padding: 10px;
            width: 400px;
            border: 1px solid #000;
            height: 70px;
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div id="exemple">
	Contenu<br>
	1<br>
	2<br>
	3<br>
	4<br>
	5<br>
	6<br>
	7<br>
	8<br>
	9<br>
	</div>
	<span class="bouton" id="bouton_exemple" onclick="javascript:afficher_cacher('exemple');">lire la suite</span>
	<script language="javascript" type="text/javascript">
	function afficher_cacher(id)
	{
		var hauteur=document.getElementById("exemple").offsetHeight;
			
		if(hauteur>="70")
		{
			document.getElementById(id).style.height='auto';
			document.getElementById('bouton_'+id).innerHTML='';
		}

		return true;
	}
		</script>
    </body>
</html>
Réponse 4 / 5
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
A force de chercher (encore 2h ce soir), j'ai trouvé, je mets ça au propre demain et je le poste pour avoir vos avis.
Réponse 5 / 5
Messages postés
5
Date d'inscription
lundi 6 mars 2017
Statut
Membre
Dernière intervention
8 mars 2017
Après un peu de nettoyage voici la fonction, ce n'est peut-être pas très propre car je m'y connais peu, mais ça fonctionne. Si la hauteur de la div dépasse 70px ça affiche un "lire la suite" et une fois cliquer ce "lire la suite" disparait. Si la div fait moins de 70px, le "lire la suite" ne s'affiche pas et la div est donc définie à 70px de haut.

Si ça peut-être utile à quelqu'un, voici : 
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>test</title>
		<style type="text/css">
		#contenant {
			margin: 20px 0;
			padding: 10px;
			width: 400px;
			height: 70px;
			overflow: hidden;
			border: 1px solid #000;
        }
        </style>
    </head>
    <body>
		<div id="contenant">
			<div id="exemple">
				Contenu<br>
				1<br>
				2<br>
				3<br>
				4<br>
				5<br>
				6<br>
				7<br>
				8<br>
				9<br>
			</div>
		</div>
		<span class="bouton" id="bouton_exemple" onclick="javascript:reduire('exemple');">ici le texte</span>
		<script language="javascript" type="text/javascript">
		function afficher_cacher(id)
		{
			var hauteur=document.getElementById("exemple").offsetHeight;
			if(hauteur>="70")
			{
				document.getElementById('bouton_'+id).innerHTML='lire la suite';
			}
			else
			{
				document.getElementById('bouton_'+id).innerHTML='';
			}
			return true;
		}
		function reduire(id)
		{
			document.getElementById("contenant").style.height='auto';
			document.getElementById('bouton_'+id).innerHTML='';	
		}
		afficher_cacher('exemple');
		</script>
    </body>
</html>
Posez votre question