puoi creare due funzioni con javascript, una per ridurre e l'altra per ingrandire, da attribuire all'onclick su due elementi, creando due animazioni distinte.
Esempio:

codice:
<style type="text/css">
.container {position: absolute; width:90%; height:100%; left:5%; min-width:1000px; border: 1px solid #000}
.nav {position:absolute; width:20%; height:90%; min-height:700px; top:1%; left:1%; padding:1%; border: 1px solid #000}
#content {position:relative; width:60%; height:90%; top:1%; left:35%; border: 1px solid #000}

.contentAnimation{transform-origin:right top; -webkit-transform-origin:right top;transform:scale(0.5);-webkit-transform:scale(0.5); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
.contentAnimationReverse{transform-origin:left top; -webkit-transform-origin:left top;transform:scale(1);-webkit-transform:scale(1); transition:all 2s ease-in; -webkit-transition:all 2s ease-in;}
</style>
<script type="text/javascript">
function riduci(){
document.getElementById('content').className ='contentAnimation';
}
function espandi(){
document.getElementById('content').className ='contentAnimationReverse';
}
  </script>
</head>

<body>
<div class="container">
<div class="nav">
<span onclick="riduci()">riduci</span>
<span onclick="espandi()">espandi</span>
</div>
<div id="content"></div>

</div>
poi ci saranno modi migliori per farlo, ma se intendi usare javascript meglio starebbe la tua richiesta nel forum relativo