Sujet Précédent Sujet Suivant

Afficher la suite (agrandir un div)

Résolu/Fermé
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017 - 6 mars 2017 à 23:10
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017 - 8 mars 2017 à 20:40
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
A voir également:

5 réponses

Réponse 1 / 5
jordane45 Messages postés 38396 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 janvier 2025 4 732
7 mars 2017 à 00:02
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>

0
Réponse 2 / 5
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017
7 mars 2017 à 00:04
Rapide ! Merci je teste cela demain... Dire que j'ai passé des heures pour fabriquer un script et qui n'est pas au point...
0
Réponse 3 / 5
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017
7 mars 2017 à 20:40
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>
0
Réponse 4 / 5
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017
7 mars 2017 à 22:20
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
LeKiffeur Messages postés 5 Date d'inscription lundi 6 mars 2017 Statut Membre Dernière intervention 8 mars 2017
8 mars 2017 à 20:40
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>
0

Discussions similaires

Durée d'une diapositive animée
bibibibi99 -
bibibibi99 -

2 réponses