Locking sidebar

http://stackoverflow.com/questions/19638655/jquery-hover-to-show-sidebar-but-an-option-to-lock-it

HTML

<div class="secondary-container">
  <div class="sec-sidebar">
    <div class="sec-nav">
      <div class="sec-nav-inside">
        <a href="#" class="sec-sidebar-toggle"></a>
        Navcontent content content content content content content content content content content content content content content content content content
      </div>
    </div>
  </div>
  <div class="sec-main">content content content content content content content content content content content content content content content content content content </div>
</div>

CSS

body {margin: 0px;}
.secondary-container { width: 100%; height: 300px; display: table; table-layout: fixed; background-color: #c7c7c7;}
.sec-sidebar { width: 38px; background-color: #349a4e; vertical-align: top; display: table-cell; position: relative;}
.sec-nav { background-color: #ff9600; width: 253px; height: 70%; margin-left: -215px;}
.sec-nav-inside { position: relative; width: 100%; height: 100%;}
.sec-sidebar-toggle { width: 19px; height: 19px; background-color: blue; position: absolute; right: 7px; top: 19px;}
.sec-main { vertical-align: top; display: table-cell;}

JavaScript

$('.sec-sidebar-toggle').click(function(e){
  e.preventDefault();
  if( $(this).closest('.sec-sidebar').hasClass('sidebar-locked') ){
    //unlocked
    $(this).closest('.sec-sidebar').removeClass('sidebar-locked');
    $(this).closest('.sec-sidebar').stop().animate({width: '38px'}, 300).css({'overflow': 'visible'});
    setupHover();
  } else{
    //locked
    $(this).closest('.sec-sidebar').addClass('sidebar-locked');
    $(this).closest('.sec-sidebar').stop().animate({width: '253px'}, 300).css({'overflow': 'visible'});
    $('.sec-sidebar').unbind('mouseover');
    $('.sec-sidebar').unbind('mouseout');
  }
});

function setupHover() {
   
    //Hover
    $('.sec-sidebar').mouseover(function(){
      $(this).find('.sec-nav').stop().animate({marginLeft: '0px'}, 300);
    }).mouseout(function(){
      $(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
    });
}

setupHover();