Bonjour à tous,

Je débute dans le développement jQuery et j'essai de réaliser un script qui permet de cacher les éléments li d'une liste au delà de 3 item.

en gros ça doit donner cela

première liste
  • item11
  • item12
  • item13

+ d'item

deuxième liste
  • item21
  • item22
  • item23

+ d'item

j'ai donc fait ce script :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
	(function($){
		$.fn.maskList = function(){
 
			var nbItem = $(this).children().size();
			var visible = false;
			var showclass = 'moreInfosDown';
			var hideclass = 'moreInfosUp';
 
			if (nbItem >= 3) {		
				// Si il y a plus de 3 item j'ajoute un lien et je cache les item superieur à 3
				$(this).after('<p class="moreInfos"><a href="#" class="'+showclass+'">More news</a></p>');
				$(this).children('li:gt(2)').hide();
 
				$('.moreInfos').live("click",function(event){
					event.preventDefault();
					visible = !visible;
 
					if (visible == true) {
						$(this).prev().children().show('fast');
					}
					else {
						$(this).prev().children('li:gt(2)').hide('fast');
					}
				});
			}
			return $(this);
		};
	})(jQuery)
 
	$("#listNewsFooter").maskList();
	$("#liste2").maskList();
Mon script doit s'appliquer sur différentes listes mais j'ai un problème sur la variable visible qui n'est pas propre à chaque instance. Si j'agis sur la première liste et que ma variable visible prend false et que j'agis sur ma deuxième liste alors ma variable démarre à false et non true. Bref je sais pas comment faire pour qu'elle soit propre à chaque instance.

Merci