Jquery toggle class function not working
<p>Hello all i want to change class of my div on event handlers like mouse over mouse out or click() ..But i m facing problem that it does not change the effect of toggle class.here is the code please help me out thanks.     </p>

<pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org        /TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

 &lt;title&gt;Untitled Document&lt;/title&gt;

   &lt;style type="text/css"&gt;


    .hello{

 background:#60C;


}
      .main{
width:300px;
height:300px;
background:#00F;
border-radius:10px;
}
    &lt;/style&gt;
    &lt;script type="text/javascript" src="jquery-1.7.1.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" &gt;


     $(function() {
        $("#event").bind("mouseover mouseleave", highlight);

        $("#event").bind("click", function(evt) {
             $("#event").toggleClass("hello"); 
            $("#event").unbind("mouseover mouseleave", highlight);
            $("#event").html("&lt;p&gt;You shut off the hover effect!&lt;/p&gt;");
        });
    });

    function highlight(evt) {
        $("#event").toggleClass("high");        
    }


   &lt;/script&gt; 
&lt;/head&gt;
</code></pre>

<p></p>

<pre><code>    &lt;div class="main" id="event"&gt;
     This is a div click to highlight
     &lt;/div&gt;
</code></pre>

<p>
</p>
