show/hide div based on class name
<p>i have a show/hide div javascript function</p>

<p>i want convert it to work with class name instead of style</p>

<p>This is my function that i want convert it</p>

<pre><code>&lt;script&gt;
function toggle(e, id) {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
    toggle.el = el;
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    return false;
}
document.onclick = function() {
    if (toggle.el) {
        toggle.el.style.display = 'none';
    }
}
&lt;/script&gt;
</code></pre>

<p>i want convert it to work with class name,</p>

<p>for example:</p>

<pre><code>#hidden{
display:none;
}
#shown{
display:block;
}
function toggle(e,id){
if(el.class=='hidden'){
el.setAttribute("class", "showen");
}
//etc...
}
</code></pre>
