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, 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

**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,

Jquery toggle

jQuery

Vue hybride

Discussions similaires

Partager

Partager