Bonsoir,,

Je me permets de faire appel à vous car je me retrouve face à un mur..

J'essaye de créer un slider avec une barre "de progression" (servant de menu) permettant de choisir quelle page visualiser.
Concrètement, en cliquant sur un point de la barre (correspondant à une page), la barre de progression doit se remplir et le div concerné s'afficher à la place du div actuel.

Malheureusement j'ai beau remuer ça dans tous les sens, il y a toujours quelque chose qui ne fonctionne pas.
Actuellement, le code fonctionne à peu près correctement dans le sens progressif des DIVs, de la Page1 à 3 (même si la transition n'est pas vraiment fluide) mais dans le sens dégressif, le div affiché disparaît bien mais le div sélectionné ne s'affiche pas.

Pourriez-vous m'éclairer un peu ? Merci d'avance et n'hésitez pas à me faire savoir si quelque chose n'est pas clair.
Bonne soirée à tous !

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
<div class="container">
    <div class="wrapper">
          <ul class="progressbar">           
            <li class="Page1 active"></li>
            <li class="Page2"></li>
            <li class="Page3"></li>
          </ul>
 
          <div class="Page1 active">
          </div>
 
          <div class="Page2>
          </div>
 
          <div class="Page3">
          </div>
 
    </div>
</div>

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
18
19
<script type="text/javascript">
$(".progressbar li").on("click", function() {
 
var chosenpage =$(this).attr("class");
  $(".progressbar li.active").removeClass("active");
    $(".progressbar li.before-active").removeClass("before-active");
 
    $(this).addClass("active");
    $(this).prevAll().addClass("before-active");
 
      $('.menu div.active').hide('slide', {direction: 'left'}, 1000);
      $('.menu div.active').removeClass("active");
      $('.menu div.'+chosenpage).addClass("active", function () {
 
        $('.menu div.active').show('slide', {direction: 'right'}, 1000);
 
      });
});
</script>