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?
Modifié par Franjuju (10 Jul 2019 - 14:00)

Et l'eau,

on referme tout (y compris ceux qui sont fermés) et on ouvre celui qu'on veut.....

Hello,

J'ai essayé en rajoutant une class à mes contenus et en rajoutant dans ma fonction la fermeture de ces class avant l'ouverture de l'autre mais ça ne fonctionne pas...

J'ai corrigé ton html. Il est atteint de la divite et idite aïgue.....

html :

<div class="container">
    <nav>
        <a href="#">ouvrir test 1 +</a>
        <a href="#">ouvrir test 2 +</a>
        <a href="#">ouvrir test 3 +</a>
    </nav>
    
    <div class="content">
        <div>Test1</div>
        <div>Test2</div>
        <div>Test3</div>
    </div>
</div>

css

.container nav a{
  display:block;
  text-decoration:none;
  color:black;
}
.container .content div{
	height:20px; /*  est ce raisonnable ? */
	display: none;
	margin-bottom: 0;
  background-color: blue;
  color: white;
  cursor: pointer; /* pourquoi ? */
}

js

$('.container nav a').each(function(index){
  $(this).on('click', function(e){
    var $divs = $(this).closest('.container').find('.content div'),
        $target = $divs.eq(index);
    $divs.slideUp();  //ferme tout
    $target.slideDown(); //ouvre la cible
    e.eventDefault();
  });
});

cela me semble un peu plus claire à lire
Modifié par niuxe (11 Jul 2019 - 16:40)