javascript - 2 回目のクリックで実行される JavaScript 関数

Question

divの幅を折りたたむ/展開する必要があります(非表示/表示ではなく)。何らかの理由で、私が書いたこのコードは、2回目のクリックでのみ機能するようです。変数をチェックするためにアラートを入れた場合、変数が最初にスタイルを取得していないようです。何かご意見は？ここにjsフィドルがあります：

http://jsfiddle.net/JKxHw/4/

これが私のcss、html、およびスクリプトです

#left_nav {width:200px; border: 1px solid red; height: 300px;}

<div id="left_nav_collapser">
<a href="#" onclick="javascript:hideNav();return false;">collapse width of left nav</a>
</div>

<div id="left_nav">
<div id="left_nav_navlinks">
<ul><li>Apples<ul><li>Macintosh</li><li>Styrofoam</li></ul>
</li><li>Oranges</li><li>Bananas</li></ul>
</div>
   </div>
<script>
function hideNav(){

var myLayer = document.getElementById('left_nav').style.width;
//alert(myLayer);
if(myLayer=="200px"){
    document.getElementById('left_nav').style.width="0px";
    document.getElementById('left_nav_navlinks').style.display="none";
    } else {
    document.getElementById('left_nav').style.width="200px";
    document.getElementById('left_nav_navlinks').style.display="block";
};

}
</script>

詳細: 私が望む限り、これには jQuery を使用できません。