Show menu/div onclick or onmouseover not the easy way
<p>I'm trying to make a menu that can collapse:</p>

<ul>
<li>If you click on a button div the menu shows and stays even if you hover the button div.</li>
<li>If you click again on the button div the menu hides.</li>
<li>When the menu is hiding onmouseenter or mouseover it shows onmouseleave or mouseout 
it's hiding.</li>
</ul>

<p>I can't make this happen, this is my code:</p>

<pre><code>        $(function() {
        $('#arrow').bind('mouseenter', function(){
            if($('#hoofdmenu').attr("class") == "show"){
            $('#hoofdmenu').addClass("class", "mousehide"); 
            $('#hoofdmenu').hide();
            }
            else 
            {
            $('#hoofdmenu').removeClass("class", "mousehide");  
            $('#hoofdmenu').addClass("class", "mouseshow");
            $('#hoofdmenu').show();
            }
        });

        $('#arrow').bind('click',function(){
            if ($('#hoofdmenu').attr("class") == "show"){
            $('#hoofdmenu').attr("class", "hide");  
            $('#hoofdmenu').hide();
            }
            else
            {
            $('#hoofdmenu').attr("class", "show");  
            $('#hoofdmenu').show(); 

            }
        });

     });
</code></pre>

<p>Someone can help me with this problem?
Kind regards,
Frank</p>
