title: JQuery accordion - unbind click event
body: <p>I am writing a form wizard using JQuery's <a href="http://bassistance.de/jquery-plugins/jquery-plugin-accordion/" rel="nofollow noreferrer">accordion module</a>.  The problem is I want to override any mouse clicks on the accordion menu so that the form is validated first before the accordion will show the next section.</p>
  <p>I have tried the following:</p>
  <pre><code>$('#accordion h3').unbind();
      
  $('#accordion h3').click(function() {
    if (validate())
    {
      $(&quot;#accordion&quot;).accordion('activate', 2);
    }else
    {
      alert(&quot;invalid form&quot;);
    }
  }
  </code></pre>
  <p>But the above code doesn't work.  The built-in click event of the accordion still gets called and the accordion shows the next section regardless of whether the form is valid or not.</p>
  <p>I have also tried the following code:</p>
  <pre><code>$('#accordion h3').click(function(event) {
     if (validate())
     {
       $(&quot;#accordion&quot;).accordion('activate', 2);
     }else
     {
       alert(&quot;invalid form&quot;);
     }        
     event.stopPropagation();
  });
  </code></pre>
  <p>But the stopPropagation() call doesn't seem to affect the accordion behaviour at all, the next section is displayed whether or not the form is valid.</p>
  <p>Any idea what I may be doing wrong?</p>