jQuery Accordion - Prevent expand on click of link
<p>Here is my HTML:</p>

<pre><code>    &lt;div class="accord"&gt;

    &lt;ul class="root static"&gt;

        &lt;li class="static"&gt;

          &lt;a class="static menu-item" href="http://google.com"&gt;
            &lt;span class="additional-background"&gt;
              &lt;span class="menu-item-text"&gt;Heading&lt;/span&gt;
            &lt;/span&gt;
          &lt;/a&gt;

          &lt;ul class="static"&gt;
            &lt;li class="static"&gt;
               &lt;a class="static menu-item" href="http://msn.com"&gt;
                 &lt;span class="additional-background"&gt;
                   &lt;span class="menu-item-text"&gt;Item 1&lt;/span&gt;
                 &lt;/span&gt;
               &lt;/a&gt;
            &lt;/li&gt;
         &lt;/ul&gt;

      &lt;/li&gt;

.. items continue ..
</code></pre>

<p>The jQuery:</p>

<pre><code>$(function() {
$('.accord .root .static ul.static').hide();
    $('.ms-quickLaunch .root .static:has(ul.static)').each(function (i, elmnt) {
        $(this).addClass('linksBelow');
    });
    $('.accord .linksBelow').click(function() {
        $(this).find('ul.static').slideToggle('fast');
        $(this).toggleClass('twirl');
    });
});
</code></pre>

<p>What happens with the above is that when you click the <code>&lt;li&gt;</code> Heading the accordion expands, however the Header contains a link <code>&lt;a class="static menu-item" href="http://google.com"&gt;</code>.</p>

<p>I'd like to change the above jQuery so that when I click the link in the header the accordion does not expand, however when I click in any other area around the link I want the accordion to expand.</p>

<p>Some how I need to be able to tell wether the link was clicked, and if that link was clicked prevent the accordion from expanding.</p>

<p>Anyone have any ideas?</p>

<p>The link isnt set to <code>display:block</code> so it does not occupy the full width of the header.</p>
