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('+'); 
      }
 
   });
 
});