Q:

jQuery 2 column flexible using buttons

See this fiddle for where i am stuck:
http://jsfiddle.net/kylebellamy/hfLm3n9z/1/
I want the buttons to do the collapse, not the DIVs but I can't figure out how to cause the trigger to be them instead of the DIVs. I realize the All is not necessary but from a typical user standpoint, it will lead to less confusion in the long run.
I tried creating three scripts using the name fields for where it currently says 'div' in the JS but that stopped all function of the expand and collapse.
Thanks for any help you can offer!
HTML
<div style="height:10px !important;" class="selections">
<input type="button" name="ButtonLeft" value="&#60;&#60;">
<input type="button" name="ButtonAll" value="All">
<input type="button" name="ButtonRight" value="&#62;&#62;"></div>
<div class='left results'></div>
<div class='right results'></div>

CSS
* { margin: 0; }
div.results { min-height: 10em; transition: linear 0.5s; }
div.selections { min-height: 3em; }
.left {
  float: left;
  width: 49%;
  background: crimson;
}
.right {
  float: right;
  width: 49%;
  background: dodgerblue;
}
.expanded { width: 100%; }
.collapsed { width: 0%; }

JS
$('div').click(function(){
    $(this).toggleClass('expanded')
    .siblings().toggleClass('collapsed');
});

A:

$('.lexpand').click(function(){
     $(".results").removeClass('collapsed').removeClass('expanded');
    $(".right").toggleClass('expanded');
    $(".left").toggleClass('collapsed');
});
$('.rexpand').click(function(){ 
    $(".results").removeClass('collapsed').removeClass('expanded');
    $(".left").toggleClass('expanded');
    $(".right").toggleClass('collapsed');
});
$('#all').click(function(){
  $(".results").removeClass('collapsed').removeClass('expanded');
    
});
* { margin: 0; }
div.results { min-height: 10em; transition: linear 0.5s; }
div.selections { min-height: 3em; }
.left {
  float: left;
  width: 49%;
  background: crimson;
}
.right {
  float: right;
  width: 49%;
  background: dodgerblue;
}
.expanded { width: 100%; }
.collapsed { width: 0%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="height:10px !important;" class="selections"><input type="button" name="Left" class="lexpand" value="<<"><input type="button" id="all" name="All" value="All"><input type="button" name="Right" class="rexpand" value=">>"></div>
<div class='left results'></div>
<div class='right results'></div>

