title: jQuery accordion with href and collapsible
body: <p>I'm working on an accordion menu with href link and collapsible header.
  The problem is, it collapse the parent when I click the the child accordion. Are there any workaround?<br /><br /></p>
  
  <pre><code>&lt;ul class="accordion"&gt;
    &lt;li&gt;
      &lt;a class="acc-header" href="http://www.google.com"&gt;menu - level 1&lt;/a&gt;
      &lt;h3&gt;+&lt;/h3&gt;
      &lt;ul class="accordion"&gt;
        &lt;li&gt;
          &lt;a class="acc-header" href="http://www.google.com"&gt;menu - level 2-1&lt;/a&gt;
        &lt;h3&gt;+&lt;/h3&gt;
          &lt;ul class="accordion"&gt;menu - level 3&lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;menu - level 2-2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function(){
      $( ".accordion" ).accordion({
        header: "h3",
        collapsible: true,
        heightStyle: "content",
        active: false,
        icons: false,
        animate: 200,
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the updated version and it's working. The solution is to use the "<code>event.stopPropagation()</code>"(as @Renan Araújo mentioned) and remove the header setting on accordion.</p>
  
  <p><a href="https://codepen.io/CocoSkin/pen/vRQyZP" rel="nofollow noreferrer">https://codepen.io/CocoSkin/pen/vRQyZP</a></p>