Jquery toggle

**ericyuri** · 07/03/2013, 15h01

Bonjour,

J'ai créé une page web pour grouper quelques input.

La page marche bien sauf quand je mets le focus dans autre input.

Je veux que le code fasse le collapse et restore juste quand je clique sur le texte "+" ou "-".

Pourriez-vous m'aider ?

Merci.

Voici le code :

Code html :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head>
<style>
#toggle-view {
   list-style:none; 
   font-family:arial;
   font-size:11px;
   margin:0;
   padding:0;
   width:300px;
}
 
#toggle-view li {
   margin:10px;
   border-bottom:1px solid #ccc;
   position:relative;
   cursor:pointer;
}
 
#toggle-view h3 {
   margin:0;
   font-size:14px;
}
 
#toggle-view span {
   position:absolute;
   right:5px; top:0;
   color:#ccc;
   font-size:13px;
}
 
#toggle-view .panel {
   margin:5px 0;
   display:n
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
</script>
</head>
<body>
 
<ul id="toggle-view">
<li>
   <input type="text" id="P29_0" />
   <span>+</span>
   <div class="panel">
      <input type="text" id="P29_1"/></br>
      <input type="text" id="P29_2"/></br>
      <input type="text" id="P29_3"/></br>
      <input type="text" id="P29_4"/>
   </div>
</li>
</ul>
 
 
</body>
</html>

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
$(document).ready(function () {
 
   $('#toggle-view li').click(function () {
 
      var text = $(this).children('div.panel');
 
      if (text.is(':hidden')) {
         text.slideDown('200');
         $(this).children('span').html('-'); 
      } else {
         text.slideUp('200');
         $(this).children('span').html('+'); 
      }
 
   });
 
});

**Bovino** · 07/03/2013, 15h48

Je veux que le code fasse le collapse et restore juste quand je clique sur le texte "+" ou "-".

Ben dans ce cas, pourquoi tu l'attaches au li ?

C'est sur le span qu'il faut mettre l'événement...

**SpaceFrog** · 07/03/2013, 15h49

il y a aussi slideToggle() ...

**ericyuri** · 07/03/2013, 15h58

Salut Bovino,

J'ai déjà essayé ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$('#toggle-view span').click(function () {
<span id="toggle-view">+</span>

mais il n'a marché pas

Merci,

**ericyuri** · 07/03/2013, 15h59

Salut SpaceFrog,

Je n'ai connais pas slideToggle() ... je vais chercher sur ça
Merci

Je viens de essayer ça, mais il cache toutes les imputs !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<script>
$(document).ready(function(){
  $("span").click(function(){
    $("input").slideToggle();
});
 
});
</script>

Il faut que le premier imput s'affiche toujours il sera la somme total des autres imputs

Merci

**Bovino** · 07/03/2013, 16h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#toggle-view span')

Là, tu cherches tous les span enfants de #toggle-view, or dans

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id="toggle-view">+</span>

Je ne vois pas particulièrement de balise span enfant.

**ericyuri** · 07/03/2013, 16h19

j'ai déjà essayé ça .....

tu peux copier et coller le code et essayer dans cette page web

http://www.w3schools.com/jquery/tryi...ery_eff_toggle

Merci

**danielhagnoul** · 07/03/2013, 22h02

Bonsoir

Exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.panel { display: none; }
#btnPlus { padding-top: 2px; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul id="toggle-view">
	<li>
		<input type="text" id="P29_0" /> 
		<button id="btnPlus">
	   		<img src="http://danielhagnoul.developpez.com/images/arrow-down_16.gif">
	   	</button>
		<div class="panel">
			<input type="text" id="P29_1"/></br>
			<input type="text" id="P29_2"/></br>
			<input type="text" id="P29_3"/></br>
			<input type="text" id="P29_4"/>
		</div>
	</li>
</ul>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$( "#btnPlus" ).on( "click", function(){
	var jObj = $( "img", this ),
		str = jObj.attr( "src" );
 
	$( "div.panel" ).slideToggle( "slow", function(){
      	if ( str == "http://danielhagnoul.developpez.com/images/arrow-down_16.gif" ){
      		jObj.attr( "src", "http://danielhagnoul.developpez.com/images/arrow-up_16.gif" );
      	} else {
      		jObj.attr( "src", "http://danielhagnoul.developpez.com/images/arrow-down_16.gif" );
      	}
    });
});

**ericyuri** · 08/03/2013, 13h42

Bonjour Daniel

J'ai essayé ton code, mas les quatre dernier imput restent toujours cache.

Je pense qu'il faut mettre dans le "IF" display = visible/nome.

Merci,
Eric

**danielhagnoul** · 08/03/2013, 22h11

Voici le code de ma page de test, il suffit de copier-coller pour tester.

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0b2.js",
			"http://code.jquery.com/color/jquery.color-2.1.1.min.js",
			"https://raw.github.com/janl/mustache.js/master/mustache.js",
			"https://raw.github.com/jonnyreeves/jquery-Mustache/master/jquery.mustache.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js"
		);
 
		/*
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js",
		 * "http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js",
		 * 
		 * "http://code.jquery.com/jquery-migrate-1.1.0.min.js",
		 */
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css" media="print">
	<style>
		.hyphens { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
		nav { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: orange; }
		aside { display: table-cell; text-align: left; border: 0.1rem dotted grey; width: 25rem; background-color: yellow; }
		article { display: table-cell; text-align: justify; border: 0.1rem dotted grey; }
		.table1 { border-collapse: separate; border-spacing: 3rem; empty-cells: hide; caption-side: top; }
		.ligne { display: table-row; }
		.caption { display: table-caption; text-align: center; }
		.table1 .ligne { min-height: 30rem; }
		.table1 article { min-width: 40rem; vertical-align: top; }
 
		/* TEST -- Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
.panel { display: none; }
#btnPlus { padding-top: 2px; }
 
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>	
	<section class="conteneur">
		<section class="table1">
			<header class="caption">
				<h3>Sous-titre</h3>
			</header>
			<section class="ligne">
				<article>
 
<ul id="toggle-view">
	<li>
		<input type="text" id="P29_0" /> 
		<button id="btnPlus">
	   		<img src="http://danielhagnoul.developpez.com/images/arrow-down_16.gif">
	   	</button>
		<div class="panel">
			<input type="text" id="P29_1"/></br>
			<input type="text" id="P29_2"/></br>
			<input type="text" id="P29_3"/></br>
			<input type="text" id="P29_4"/>
		</div>
	</li>
</ul>
 
				</article>
				<article>
 
 
				</article>
			</section>
		</section>
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-01-28T10:36:10.418+01:00" pubdate>2013-01-28T10:36:10.418+01:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script>
		"use strict";
 
		head( function(){ // Voir : http://headjs.com/
 
			$( function(){
 
				// debug
				// $.Mustache.options.warnOnMissingTemplates = true;
 
				/* Début code du test */
 
$( "#btnPlus" ).on( "click", function(){
	var jObj = $( "img", this ),
		str = jObj.attr( "src" );
 
	$( "div.panel" ).slideToggle( "slow", function(){
      	if ( str == "http://danielhagnoul.developpez.com/images/arrow-down_16.gif" ){
      		jObj.attr( "src", "http://danielhagnoul.developpez.com/images/arrow-up_16.gif" );
      	} else {
      		jObj.attr( "src", "http://danielhagnoul.developpez.com/images/arrow-down_16.gif" );
      	}
    });
});
 
				/* Fin code du test */
 
				// debug
				// console.log( $.Mustache.templates() );
			});
 
			$( window ).load( function(){
 
			});
 
		});		
	</script>
</body>
</html>

**ericyuri** · 11/03/2013, 12h04

c'est parfait Daniel ! Merci

Jquery toggle

jQuery

Discussions similaires

Partager

Partager