[quote="narcisse"]Voilà voilà ... c'est écrit en huit lignes de code.[/quote]

Et encore, c'est beaucoup pour du Jquery... :wink:
Un beau début en tout cas.

mootools est bien aussi (enfin j'aime ^^) et je le trouve plus légère que Jquery et tout ^^ :D

bye hawk

/me est content d'avoir pu faire découvrir cet outil :)
N'hésite pas a essayer d'autres librairies si tu as le temps, dès fois que ça te convienne mieux ;)
Moi j'avoue ne pas avoir fait l'effort d'aller plus loin ;)

Fin des fignolages, et je découvre la puissance de jquery :

[code]$(document).ready(function(){
$('h3').each(function(){
$('#links').append('<li><a href="#' + $(this).children('a').attr('name') + '" title="">' + $(this).text() + '</a></li>');
$(this).children('a').click( function () {
if ($(this).parent().next().is(':hidden')) {
$(this).parent().next().fadeIn();
$(this).children('img').attr('src', '/images/moins.png');
}
else {
$(this).parent().next().fadeOut();
$(this).children('img').attr('src', '/images/plus.png');
}
return false;
});
});
});
[/code]

Pour les néophytes qui, comme moi, se demandent ce que jquery peut avoir de si génial, je vous fournis une explication fonctionnelle de ce bout de code :

- Pour chaque balise H3 trouvée dans le document, écrire dans le menu du haut un lien de type ancre vers la balise.
- Si on clique sur l'image fournie dans la balise H3, alors on cache la div qui est en dessous avec la méthode de type fadeIn, et on change l'image fournie dans le lien.
- Si on reclique sur l'image fournie dans la balise H3, alors on affiche à nouveau la div qui est en dessous avec la méthode de type fadeOut, et on remet l'image fournie dans le lien.

Voilà voilà ... c'est écrit en huit lignes de code.

Voici la structure html du document, pour ceux qui veulent tester :

[code]<h3><a href="#" id="cartes" name="cartes" ><img id="im4" src="/images/moins.png" alt="masquer/afficher" /></a>Cartes bancaires</h3>
<div class="main_block" id="cartes_bancaires" >
mouarf
</div>

<h3><a href="#" id="cartes" name="cartes" ><img id="im5" src="/images/moins.png" alt="masquer/afficher" /></a>Cartes bancaires</h3>
<div class="main_block" id="cheques" >
mouarf 2
</div>[/code]

Suite à ta réponse, voici le code pour faire cette opération :

[code]$(document).ready(function(){
$('h3').each(function(){
$(this).children('a').click( function () {
if ($(this).parent().next().is(':hidden')) {
$(this).parent().next().fadeIn();
}
else {
$(this).parent().next().fadeOut();
}
});
});
});[/code]

je ne veux pas toucher directement à l'identifiant pour éviter de faire mon opération sur chaque div.

Le code ci-dessus fonctionne parfaitement, et de manière assez performante à priori ^^

Merci encore de votre aide.

Et pourquoi ne pas prendre directement l'id "histo_appels" ?

Une façon d'y arriver serait de sélectionner le parent de H3 et de poursuivre vers le prochain enfant (child), qui serait donc le div en question..

Quand même je sèche.

J'ai encore un peu de mal à saisir certaines choses de Jquery je pense, malgré la doc et tout ça, j'need help.

Voici mon chteumeul :

[code]
<h3><a href="#" id="histo" name="histo" ><img id="im3" src="/images/moins.png" alt="reduire" /></a>Historique des appels</h3>
<div id="histo_appels" class="main_block">
[/code]

Comment récupérer, en jquery, la balise div suivant le h3 ?
[code]
$(document).ready(function(){
$('h3').each(function(){
$(this).children("a").clic( function () {
// selectionner la balise div tout de suite après le h3 (pas ok) - lui appliquer un effet de fadeout (ok)
});
});
});
[/code]

J'ai noté "pas ok" pour ce que je ne parviens pas à faire dans le bout de code au dessus ...

Merci de votre aide.

Après quelques tests,

cet outil est juste formidable.

Bonjour,
La philosophie de jquery est un peu déroutante au départ, mais une fois qu'on connait les fonctions de bases, ça devient enfantin!
Pour obtenir le contenu d'un balise, il suffit par exemple:[code]//code html :
<p id="bla">contenu de mon p</p>

// code jquery:
alert(
$('#bla').html()
)[/code]
Après lorsque tu as plusieurs éléments, tu peux utiliser each, exemple:[code]//code html :
<p class="bla">contenu de mon p</p>
<p class="bla2">contenu de mon p2</p>
<p class="bla3">contenu de mon p3</p>

// code jquery:
$('p').each(function(){
alert('classe: '+$(this).attr('class')+'\ncontenu :'+$(this).html());
});[/code]
Attention code fait de tête, non testé, il y surement des petites erreurs, mais c'est pour le principe ;)

une recherche sur google "tutorial jquery" et hop http://blog.nicolargo.com/2008/01/tutorial-jquery.html

Y'a pas une version française ? Parce que moi la doc, je suis pas fan en général, alors en anglois ...

Sinon, $('h3') ça renvoie quoi ? Un tableau ?

j'ai tenté de faire un .length dessus, il le prend mal :s

[code]$('h3');[/code]
Si tu débutes en jQuery, n'hésite pas à en consulter la [url=http://docs.jquery.com]documentation en ligne[/url]. ;)

Bonjour,

je souhaite récupérer tous les éléments de type H3 dans ma page, à l'aide de jquery (je démarre tout juste avec).

Voici la structure du titre :
<h3><a>titre</a><span>info comp</span></h3>

L'idée étant de bien séparer le lien du span ..

Merci de votre aide.