jquery toggle montrer/cacher

Version imprimable

salut

j arrive pas à comprendre et à appliquer svp , comment je peux n'afficher qu'un seul élément à la fois? j ai essayé next et hide , mais je dois mal m'y prendre ça ne fonctionne pas...
Là les elemnts s'affichent aux clics, sans se cacher, j aimerais qu ils se cachent lorsque l on clique sur un autre elément : element 1 cliqué : se montre : element 2 cliqué : 1 se cache et 2 se montre...

Code:

1
2
3
4
5
6
	<script>$(document).ready(function(){
		$('div.toggler-1').toggleElements( );
 
		$('img.toggler-3').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
 
	});</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="examples">
 
			<h2>Nos Menus:</h2>
 
			<div class="toggler-1" title="Menu Lyonnais à 23.50&euro;">
			<p>Les entrees</p>
			<img src="Veloute-de-cepes-et-oeuf-poche-2a.jpg" alt="" class="toggler-3" title="Oeufs pochés à la crème de champignon des bois" />
			<img src="gateau de foie.jpg" alt="" class="toggler-3" title="Gateau de foie de volaille au coulis d'écrevisses" />
			<img src="image.jpg" alt="" class="toggler-3" title="Saladier lyonnais (museaux, lentilles, cervelas)" />
 
 
				<p>Les plats</p>
			<img src="fleurie.jpg" alt="" class="toggler-3" title="Saucisson brioché au vin de Fleurie" />
			<img src="brochet.jpg" alt="" class="toggler-3" title="Quenelle de brochet au coulis d'étrilles, riz sauvage" />
			<img src="boudin.jpg" alt="" class="toggler-3" title="Boudin Lyonnais au deux pommes" />
			</div>

Merci de votre aide ;)

J'ai eu le même soucis avec toggle, impossible de passer à un autre élément sans que le premier se referme etc...

Du coup, j'ai utilisé slideUp et slideDown

Si cela peux t'aider :

Code:

1
2
3
4
5
<div id="btn_connexion" class="bkgConnexion"></div> <!-- bouton de connexion -->
<div id="btn_enregistrement" class="bkgEnregistrement"></div> <!-- bouton d'enregistrement -->
 
<div id="div_connexion" style="display:none;">texte 1</div> <!-- div caché contenant les infos de la div de connexion -->
<div id="div_enregistrement" style="display:none;">text 2</div> <!-- div caché contenant les infos de la div d'enregistrement -->

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
$(document).ready(function() {
 
	animConn("connexion");
	animConn("enregistrement");
 
});
 
// Fonction qui va permettre l'animation
function animConn(divId) {
 
	var bouton = $('#btn_'+divId); // Le bouton
	var divCache = $('#div_'+divId); // Le div caché
	var classActif = "bkg_"+divId+"_actif"; // La class qui va permettre de régler le bouton qui est actif pour lui donner une apparence différente
	var ongletActif = "onglet_actif"; // La class ajouté à la volé pour définir l'onglet qui est actuellement actif
 
	bouton.click(function() {
 
		if (bouton.hasClass(ongletActif)) {
			divCache.slideUp("slow");
			bouton.removeClass(classActif).removeClass(ongletActif);
 
		} else {
 
			if ($("."+ongletActif).get(0) != undefined) {
 
				bouton.addClass(classActif);
				$("."+ongletActif).click();
				setTimeout('$("#btn_'+divId+'").click()', 700);
 
			} else {
				bouton.addClass(classActif).addClass(ongletActif);
				divCache.slideDown("slow");
			}
		}
	});
}

Voilà un peu le code... je pense que pour ton soucis, ca devrait être l'idéal, suffit de l'ajuster pour ton utilisation....

Je ne pense pas, ou ne sais pas si cela est super propre... à voir du côté expert...

18/01/2012, 09h56
chanteur06

Merci Atomya Rise, je vais voir ça en l'adaptant. C'est avec la bibliotheque standard jquery , c'est ça?
@+
18/01/2012, 10h07
chanteur06

...c 'est deja mieux...mais comment tu fais suivre le div dans le déplacement, car là ils restent fixe : lors de l'appel , le texte est positionné sous les deux div , et non pas sous leur bouton respectif...en fait l ideal serait l effet accordeon avec la souplesse du toggle ou slideup/down
18/01/2012, 11h25
Atomya Rise

humm... oui, je vois ce que tu veux dire...

Je n'ai pas vraiment de solution pour le moment, si ce n'est de les positionner en css.