11540 sujets

JavaScript, DOM et API Web HTML5

JQuery - Agrandir / Réduire div

Bonsoir à tous,

Voila je commence à créer mes propres scripts Jquery et voila ce que je recherche à faire :

Du texte. Un lien pour agrandir. Et ma div cachée

Ce que j'ai réussi à faire :
Ma div cachée l'est au début. Lors du click sur mon lien "Agrandir", ma div s'affiche et mon texte Agrandir se change en Réduire.

J'aimerais ensuite faire l'effet inverse (je n'y arrive pas) :
Lors du click sur le même lien, cacher ma div et mon texte Réduire en Agrandir.
Voila comment je m'y suis prise : j'ai rajouté une class reduire, qui se met bien dans le code html. Et une autre fonction lors du click sur Réduire mais elle ne fonctionne pas.

Voila mon code :


$(document).ready(function() {
		
	$(".details").hide();
			
	$(".listes-a-propos li .lien").addClass('afficher');
	$(".listes-a-propos li .lien").html("[+] Afficher plus de détails");
	
	$(".listes-a-propos li .afficher").click(
		function() {
			$("#maquettes").show("slow");
			$(this).html("[-] Réduire");
			$(this).removeClass('afficher');
			$(this).addClass('reduire');
			return false;
	});
			
	$(".listes-a-propos li .reduire").click(
		function() {
			$("#maquettes").hide("fast");
			$(".listes-a-propos li .lien").html("[+] Afficher");
			return false;
	});
});




<ul class="listes-a-propos">
      <li>Texte <a class="lien maquettes" href=""></a>
      <div class="details" id="maquettes">texte de ma div cachée</div></li>
</ul>


Même en faisant un alert('toto'); dans ma seconde fonction au click de Réduire, cela ne fonctionne pas Smiley decu
Modifié par fanny95 (28 Apr 2011 - 00:41)
Salut,
Utilises plutot un truc du style : 

$(".listes-a-propos li .afficher").click( function(){ $("#maquettes").slideToggle("slow"); } );
Super ta petite ligne Smiley smile Ca m'a permet d'enlever une fonction qui ne servait à rien et qui ne fonctionnait pas.

Donc j'ai bien ma seule et unique fonction suivante :

<script type="text/javascript">
$(document).ready(function() {
	$(".details").hide();
	$(".listes li .lien").html("[+] Afficher plus de détails");
			
	$(".listes li #lien-maquettes").click(
		function() {
			$(this).html("[-] Réduire");
			$("#maquettes").slideToggle("slow");
			return false;
	});
});
</script>


qui me permet lors du clique sur le lien #lien-maquettes d'afficher la div #maquettes qui lui corresponds. La "fonction" slideToggle me permet lors du clique suivant de refermer cette div. Par contre, je n'arrive pas à lui donner mon texte d'origine "[+] de détails".

Une idée comment faire ?

Et une autre question, j'ai mon code html suivant :

<ul class="listes">
      <li>Proposition de maquettes <a class="lien" id="lien-maquettes" href=""></a>
      <div class="details" id="maquettes">texte de ma div maquettes</div>
      </li>
      <li>Intégration de contenu <a class="lien" id="lien-contenu" href=""></a>
      <div class="details" id="contenu">texte de ma div contenu</div>
      </li>
</ul>


Est-il possible d'optimiser mon code JS afin de ne pas répéter ma fonction en fonction de l'id de ma div ? Car si j'utilise les class, lors du clique, elles vont s'ouvrir toutes les 2 :s
Modifié par fanny95 (28 Apr 2011 - 18:42)

<script type="text/javascript"> 

$(document).ready(function() { 
    $(".details").hide(); 
    $(".listes li .lien").html("[+] Afficher plus de détails"); 
             
    $(".listes li #lien-maquettes").click( 
        function() {
            if( $(this).text().indexOf('[-]') > -1 ) 
                $(this).html("[+] Afficher plus de détails"); 
            else
                $(this).html("[-] Réduire"); 
 
            $(this).next('div.details').slideToggle("slow"); 
            return false; 
    }); 
}); 
</script>


Ca devrait faire l'affaire...
Votre solution marche à merveilles ! C'est top. J'ai pu l'adapter à mon script et enlever tous mes ID. Merci beaucoup Smiley smile J'ai très bien compris.
Et j'ai une autre question, j'ai recherché un peu mais je n'ai pas trouvé.

J'aimerais afficher une image au lieu du texte "Agrandir".
J'ai essayé de remplacer le texte par le code html correspondant

<img src="monimage.jpg" />


Mais rien ne s'affiche. Et en regardant le code, ma balise <a> ne se ferme plus.
Donc je pense que ça vient de la fonction html qui est dans cette ligne :

$(".listes li .lien-questions").html("[+] En savoir plus");


Connaissez-vous la fonction qui me permettrait d'afficher mon image svp ?
Si je comprends ta question, j'opterais plutôt pour l'ajout/retrait d'une classe css permettant de styler le lien.
Je comprend pas trop pourquoi tu as des liens vides dans ton code et tu ajoutes le texte après. En plus ce ne sont pas vraiment des liens puisqu'ils servent juste a afficher un élément en Javascript.

Logiquement tu devrais plutôt générer ton élément (pas forcément un lien, tu peux très bien utiliser ton image en la rendant cliquable) en Javascript.


$('.details').before('<img class="expand" src="monimage.jpg" alt="En savoir plus" />');
$('.expand').click(function(){
$(this).next().slideToggle('slow');
});


Et dans ta CSS tu peux ajouter .expand { cursor: pointer; }
Modifié par jb_gfx (01 May 2011 - 15:39)
Oui je peux également prendre cette solution et mettre ce code Jquery. Mais il s'agirait de 2 images différentes (flèches) : une par défaut, et une vers le bas lorsque la div est affichée.
Comment mon image pourrait changer ?

Je vais essayer ce code :

$('.details').before('<img class="expand" src="monimage.jpg" alt="En savoir plus" />');

$('.expand').click(function(){

$(this).next().slideToggle('slow');
$('.details').after('<img class="expand" src="monimage-apres.jpg" alt="En savoir plus" />');

});
Sujet clos
Aller à