Affichage de plusieurs élément avec une fonction toggle()

Question

kri2sis

20 Jul 2013 à 01:21

bonjour
mon site est accessible pour vous mettre en situation : http://symposion.fr

je m'explique je possede un menu sur lequel on clique pour faire apparaitre un petit texte et le lien pour accéder aux pages correpondantes à l'item du menu.
pour le moment, je n'ai réussi qu'a faire cliquer l'utilisateur sur l'item pour dérouler chaque page et à cliquer sur l'élément déplié pour le replier.

ce que je souhaite, c'est que l'utilisateur clique une première fois et vois le texte se dérouler et quand il reclique sur un item du menu (y compris celui déjà cliqué), le texte dérouler se repli et soit laisse apparaitre un nouveau, soit replie simplement celui cliqué auparavant.

un peu de code ?

html :

<div id="menu-select">
						<ul id="menu-index" class="menu-index">
							<li id="parox" class="button" class="infobulle" title="parox"><a href="paroxysme.php"></a></li>
							<li id="saga" class="button" class="infobulle" title="saga"><a href="saga.php"></a></li>
							<li id="ttssl" class="button" class="infobulle" title="TTSSL"><a href="ttssl.php"></a></li>
						</ul>

            			<div id="resumes">
							<div id="text-parox" class="resume">
		 					<?php include 'pages/resume_parox.php' ?>
							</div>
							<div id="text-saga" class="saga" class="resume">
		 					<?php include 'pages/resume_saga.php' ?>
							</div>
							<div id="text-ttssl" class="resume">
		 					<?php include 'pages/resume_ttssl.php' ?>
							</div>
						</div>
						<div id="contact-index">
						<h3>Contact</h3>
            			<div class="contact">
            				Vous avez des textes à proposer ?<br />
            				Vous voulez me contacter ?<br />
            				C'est à vous.
            			</div>
            			</div>
            		</div>

le JS (JQuery actuel (qui fonctionne mais très lourd je trouve) :

 jQuery(document).ready(function($){
 	$('#text-parox, #text-saga, #text-ttssl').css('display', 'none');
 	$('#parox').click(function(){
 		$('#text-saga').fadeOut('fast');
 		$('#text-ttssl').fadeOut('fast');
 		$('#contact-index').fadeOut('fast');
 		$('#text-parox').slideDown(500).fadeIn();
 });
 	$('#saga').click(function(){
 		$('#text-parox').fadeOut('fast'); 		
		$('#text-ttssl').fadeOut('fast');
 		$('#contact-index').fadeOut('fast');
 		$('#text-saga').slideDown(500).fadeIn();
 });
 	$('#ttssl').click(function(){
 		$('#text-saga').fadeOut('fast');
 		$('#text-parox').fadeOut('fast');
 		$('#contact-index').fadeOut('fast');
 		$('#text-ttssl').slideDown(500).fadeIn();
 	});
 	$('#text-parox, #text-saga, #text-ttssl').click(function(){
 		$('#text-parox, #text-saga, #text-ttssl').slideUp(400);
		$('#contact-index').fadeIn(500);
 	});
 });

et celui que j'ai testé en vain (j'ai l'impression quemes selecteurs ne sont pas pris en compte) :

JQuery(document).ready(function(){
	$('.resume').css('display', 'none');
 	$('.button').toggle(function(e){
 		$('.resume').slideUp(400).fadeOut('fast');
		$('#contact-index').fadeIn(500);
	}, function(){
 		$('.resume').slideDown(500).fadeIn();
 		$('#contact-index').fadeOut(500);
	});
		
// });

Et je voudrais donc faire une fonction toggle plus raide et légere qui fasse ceci...

pourriez vou sm'aider svp (je trouve ça super facile mais je n'arrive pas à le faire fonctionner Smiley decu

)

merci par avance pour votre aide

eyos

24 Jul 2013 à 18:48

salut
vu ton organisation html, tu peux sélectionner le bloc texte correspondant en utilisant l'id du bouton. après tu cache tout et tu ré-affiche le bloc texte sélectionné.

  $('.resume').hide();
    $('.button').click(function(e){
        // désactiver le lien
        e.preventDefault();
        //récupérer l'identifiant du bouton cliqué
        var idButton = $(this).attr('id');
        // reconstituer l'identifiant du bloc à afficher
        var idText = 'text-'+idButton;
        // cacher tous les blocs
        $('.resume').fadeOut('fast');
        // réafficher le bloc qui correspond
        $('#'+idText).slideDown(500).fadeIn();
    });

~~supprimé~~

24 Jul 2013 à 18:51

$('machin', 'bidule', 'truc').click....

kri2sis

24 Jul 2013 à 20:31

eyos a écrit :
salut
vu ton organisation html, tu peux sélectionner le bloc texte correspondant en utilisant l'id du bouton. après tu cache tout et tu ré-affiche le bloc texte sélectionné.

  $('.resume').hide();
    $('.button').click(function(e){
        // désactiver le lien
        e.preventDefault();
        //récupérer l'identifiant du bouton cliqué
        var idButton = $(this).attr('id');
        // reconstituer l'identifiant du bloc à afficher
        var idText = 'text-'+idButton;
        // cacher tous les blocs
        $('.resume').fadeOut('fast');
        // réafficher le bloc qui correspond
        $('#'+idText).slideDown(500).fadeIn();
    });

salut et merci, mais je ne comprends pas bien ton processus... (desactivation des liens entre-autre... pourquoi ?)

merci à toi

~~supprimé~~

24 Jul 2013 à 20:41

parler dans le vide, c'est comme aspirer de l'air : ça gonfle...

kri2sis

24 Jul 2013 à 23:11

jb_gfx a écrit :
parler dans le vide, c'est comme aspirer de l'air : ça gonfle...

salut, je t'avais lu mais absolument rien compris à ce que tu voulais dire, voir ememe que tu divaguais..
$('truc', 'machin', 'bidule').click(function(){
});
reviendrais pas plus vite à utiliser une classe commune et à la selectionner ?

merci pour ta participation tout de meme et si tu peux m'éclairer, je suis tout oui

ps : je cherche a faire :
- si je clique tu ce bouton, ce texte apparait (de telle ou telle façon). lorsque je reclique sur le même bouton, le texte visible disparait. et cette réaction se passe pareillement si je clique sur un autre buton (en plus de faire apparaitre le texte corresondant

en gros créer un événement généraliser pour chaque élément Smiley eek

eyos

25 Jul 2013 à 18:20

kri2sis a écrit :

salut et merci, mais je ne comprends pas bien ton processus... (desactivation des liens entre-autre... pourquoi ?)

merci à toi

pourquoi désactiver les liens?
dans ton code html, les li qui servent de bouton contiennent des liens.

<li id="parox" class="button" class="infobulle" title="parox"><a href="paroxysme.php"></a></li>

si ces liens restent vide comme c'est le cas dans ton code, il n'y aura pas de problème, quoique, je ne vois pas pourquoi les mettre dans ce cas.
sinon, si tes liens contiennent un texte ex

<li id="parox" class="button" class="infobulle" title="parox"><a href="paroxysme.php">paroxysme</a></li>

là, si tu clique sur un bouton, tu vas être dirigé vers une autre page ( celle vers laquelle pointe le lien).
donc, on verra pas le texte qui doit s'afficher, puisque on n'est plus sur la même page.
pour éviter ça, j'ai rajouté e.preventDefault(), pour rester sur la même page même si on clique sur le lien.
après, au lieu de capter l’événement click sur chaque bouton en utilisant son id, les boutons ont en commun une classe, donc autant utiliser la classe .button. pour les cibler tous en même temps.

$('.button').click(function(e){

on demande que si on clique sur un élément qui a la class button, on déclenche la fonction.
si par exemple, un jour tu veux rajouter un autre bouton associé à un autre contenu à afficher, il te suffit de lui mettre la class button, sans rien modifier dans le js.
à ce niveau là on sait juste que l'un des boutons à été cliqué on ne sait pas lequel précisément.
pour le savoir, on utilise $(this) qui retourne l'élément qui a été cliqué.
dans ton code html, les éléments sont organisés comme suit:
un bouton qui a un id correspond à un div dont le id est compsé de 'text-' + le id du bouton
au bouton dont le id = parox correspond la div dont le id = text-parox
donc la règle sera :
si je clique sur un bouton, tu m'affiche la div qui a comme id 'text-' suivi par le id du bouton.
on récupère le id du bouton

var idButton = $(this).attr('id');

on lui rajoute text- au debut, ça nous donne l'identifiant de la div a afficher

var idText = 'text-'+idButton;

on sait maintenant quel div doit s'afficher. mais avant de l'afficher, on doit cacher les autres, au cas où il y en a une qui est déja affichée.
les div ont en commun une class resume
on demande donc de cacher tous les éléments qui ont cette class

$('.resume').fadeOut('fast');

puis on demande d'afficher la div qui nous interesse, et dont on a récupéré l'identifiant

$('#'+idText).slideDown(500).fadeIn();

voilà le principe.
ceci dit, pour mettre plus d'une class à tes éléments utilise

class="nomdeclass autreclass"

plutot que

class ="nomdeclass" class="autreclass"

la div 'text-saga' va poser problème si tu lui laisse class="saga"

kri2sis

25 Jul 2013 à 19:00

oki donc je ne suis pas encore à l'apprentissage des ajout (avec le +) mais je travaille dessus

et bien comme pour l'autre code que j'ai voulu faire, ça ne fonctionne pas, je laisse mon site en l'état pour que tu constate... je ne sais pas pourquoi il ne veux pas prendre mes codes parfois (ou alors, je les fait mal... mais pas toi !!)

merci par avance si tu as une idée...

~~supprimé~~

25 Jul 2013 à 20:01

kri2sis a écrit :

salut, je t'avais lu mais absolument rien compris à ce que tu voulais dire, voir ememe que tu divaguais..
$('truc', 'machin', 'bidule').click(function(){
});
reviendrais pas plus vite à utiliser une classe commune et à la selectionner ?

Je ne sais pas ce que ememe veut dire mais je vais quand même tenter de te répondre. Oui une classe aurait été une bonne idée mais vu que tu utilises des tonnes d'id pour leur appliquer la même fonction, je te proposais une solution intermédiaire qui aurait permis de gérer ton balisage dégueulasse sans toucher à la partie HTML de page. "machin, chouette, chose" étant juste un sélecteur CSS de base.

kri2sis a écrit :

merci pour ta participation tout de meme et si tu peux m'éclairer, je suis tout oui

C'est fait (ou pas) et en passant c'est "ouie".
Modifié par jb_gfx (25 Jul 2013 - 20:04)

kri2sis

25 Jul 2013 à 20:31

jb_gfx a écrit :

Je ne sais pas ce que ememe veut dire mais je vais quand même tenter de te répondre. Oui une classe aurait été une bonne idée mais vu que tu utilises des tonnes d'id pour leur appliquer la même fonction, je te proposais une solution intermédiaire qui aurait permis de gérer ton balisage dégueulasse sans toucher à la partie HTML de page. "machin, chouette, chose" étant juste un sélecteur CSS de base.

C'est fait (ou pas) et en passant c'est "ouie".

tu viens juste analyser les fautes d'orthographe, de grammaire ou encore les expressions ou tu fais un peu dans le domaine abordé ici ?
en définitive, je ne lis que de la critique de ta part qui ne me fera pas avancer.. je pensais pouvoir avoir quelques renseignements, mais tout ce que je récolte de ma tentative de sympathie envers toi se transforme en médiocrité...
si tu veux sur http://symposion.fr, dans "le Paroxysme de l'Aléatoire", il y a plein de texte qui attendent une correction d'ortho pour t'occuper un peu...

kri2sis

25 Jul 2013 à 20:41

eyos,
je pourrais savoir pourquoi .resume et '#'+idText sont utilisés à tour de role ? ne sont ils pas le meme sélecteur ?

eyos

26 Jul 2013 à 06:45

kri2sis a écrit :
eyos,
je pourrais savoir pourquoi .resume et '#'+idText sont utilisés à tour de role ? ne sont ils pas le meme sélecteur ?

parce que dans ce que tu veux faire, il y a deux instruction:
sue tout les éléments soit cachés et que un seul soit affiché.
.resume est la classe qui identifie l'ensemble, idText est la variable contenant l'identifiant unique d'un élément appartenant a cette class
disons que .resume est le nom de famille, et idText est le prénom de chaque membre.
on demande a tout les membres de la famille de se cacher, et que seul le membre dont le prénom correspond a idText doit apparaitre.

ceci dit, j'ai été sur ton site, et il y a un gros problème, quand tu inclus le contenu, tu inclus aussi le doctype, le head et le body des pages incluses.
ça te fait plein de doctype dans une même page Smiley sweatdrop

kri2sis

26 Jul 2013 à 12:46

Okiiiiii
merci pour ce détail qui a son importance Smiley cligne

Pour les include je dois en effet revenir dessus
j'ai été un peu à droite et à gauche entre JS, PHP et autre JQuery, PDO (dont je ne vois pas l'utilité.)
Ceci ditle code JS PHP ne semble pas fonctionner mais je vais m'atteler à ça un peu plus tard (déménagement et reconfiguration serveur...)merci à toi je te tiens au courant

Sujet clos

JavaScript, DOM et API Web HTML5

Affichage de plusieurs élément avec une fonction toggle()