Discussion :

[Franjuju]

Bonjour à tous,

J'essaye d'appliquer un slideToggle à 3 éléments. Voici le lien :

https://jsfiddle.net/franjuju/32bvnc0y/8/

Lorsque je passe du "test 1" au "test 2" puis au "test 3", l'effet est exactement ce que je veux (je veux que l'élément qui était ouvert, se ferme puis que le nouvel élément s'ouvre). Mais une fois arrivé au "test 3" et que je retourne sur le "test 1" ou le "test 2", le "test 3" ne se referme plus.

Pouvez-vous m'aider svp?

[Invité]

Bonjour,

il est plus judicieux d'utiliser des classes CSS.
+ ASTUCE : attribut data-*

• https://codepen.io/jreaux62/pen/PrLNdz

Code html :

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

1
2
3
4
5
6
7
8
9
<button type="button" class="btn-edit" data-id="div-1">1</button>
<button type="button" class="btn-edit" data-id="div-2">2</button>
<button type="button" class="btn-edit" data-id="div-3">3</button>
<button type="button" class="btn-edit" data-id="div-4">4</button>
 
<div class="edit" id="div-1">contenu 1</div>
<div class="edit" id="div-2">contenu 2</div>
<div class="edit" id="div-3">contenu 3</div>
<div class="edit" id="div-4">contenu 4</div>

Code css :

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
.btn-edit { 
  position:relative;
  display:inline-block; 
  padding-right:15px;
}
.btn-edit:after { 
  position:absolute;
  display:block;
  top:0; right:2px;
  content:' +'; 
}
.btn-edit.open:after { 
  content:' -'; 
}
.edit { 
  display:none;
}
/* deco */
#div-1 { background:yellow; }
#div-2 { background:lightgreen; }
#div-3 { background:orange; }
#div-4 { background:lightblue; }

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
12
'use strict';
$(function(){
  $('.btn-edit').on('click', function() {
    let this_id = $(this).data('id');
    // Affiche + ou -
    $('.btn-edit').not($(this)).removeClass('open');
    $(this).toggleClass('open');
    // Masquer toutes les autres div + toggle celle cliquée
    $('.edit:not(#'+this_id+')').slideUp();
    $('.edit#'+this_id).slideToggle();
  });
});

[SpaceFrog]

https://jsfiddle.net/gnycap8u/1