Bonjour la communauté,
je suis en train de créer un site internet à l'aide de la bibliothèque bootsrap & jQuery et je rencontre un problème pour une animation.

J'ai donc deux Div/colonnes sur ma page : une fine a gauche qui contient le descriptif de la page et une deuxieme avec le contenu en lui même (txt + photos).
En utilisant Jquery, j'ai codé un boutton qui permet de fermer le panneau a gauche (première Div) et de le réouvrir.

Je souhaiterais plutôt que le panneau se cache d'un coup, avoir une transition "smooth" où le panneau glisserais vers la gauche et la deuxième div qui s'agrandit pour finalement occupé l'espace des 2 divs.

Je vous met en copie mes avancées. Il ne manque que l'effet de transition (glisse vers la gauche) mais je sens que mon code est plus un bricolage qu'autre chose

http://jsfiddle.net/pUeue/2941/

HTML
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div class="col-2 panneau">panneau
</div>
<div class="col-8 contenu">
  contenu
</div>
<input type="button" class="button" value="try"></input>
<input type="button" class="button2 hidden" value="try"></input>
CSS
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
23
24
25
26
27
28
29
30
.panneau{
  width:50px;
  height:300px;
  background-color:red;
  float:left;
}
 
.col-10{
  width:250px;
  height:300px;
  background-color:yellow;
  float:left;
}
 
.contenu{
  background-color:green;
  float:left;
}
.col-8{
  width:200px;
  height:300px;
}
 
.button{
  border: solid 1px black;
}
 
.hidden {
  display:none;
}
JAVA
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
$('.button').click( function() {
 $('.panneau').toggleClass('hidden');
  $('.contenu').removeClass('col-8');
  $('.contenu').addClass('col-10');
  $('.button2').removeClass('hidden');
  $(this).addClass('hidden');
 
 });
 
$('.button2').click( function() {
 $('.panneau').toggleClass('hidden');
  $('.contenu').removeClass('col-10');
  $('.contenu').addClass('col-8');
  $(this).addClass('hidden');
  $('.button').removeClass('hidden');
 });
Alors si un de vous aurais l'amabilité de me dire ce qu'il en pense et aurai une potentielle réponse à mes questions, je suis perméable au savoir !
Merci d'avance !