javascript - JavaScript と CSS トランジションを使用して div を展開する

Question

クリックしたときにアニメーション化するテキストを含むセクションがあります。以下は jsfiddle のリンクです。html と css は非常に簡単です。なぜそれが機能しないのか、誰かが私に説明できますか?

http://jsfiddle.net/jtKuZ/9/

私のjavascriptコードは次のようになります:

function show-hide(element)
{
    var classname = document.getElementById(element).className;
    if (classname == "hidden")
        document.getElementById(element).className = "visible";
    else
        document.getElementById(element).className = "hidden";
}

そして、私はこれをHTMLに持っています:

<div id="container">
<div id="content" class="hidden" onclick="show-hide('content');">
Lorem ipsum dolor sit amet...
</div>
</div>