Test

HTML

<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

.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;
}

JavaScript

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