slideToggle sur plusieurs éléments

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? :)

Bonjour,

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

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

Code:

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:

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:

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

https://jsfiddle.net/gnycap8u/1