Jquery accordion nested link crashes the parent link

The problem is when we click E4. Before even showing it's submenus E4I and E4II, the parent of E4 which is E closes automatically.

Does jQueryUI support nested accordions? The design primarily was using Bootstrap accordion, but later received a requirement that requires the DOM elements to be generated dynamically.

$("ul#testJ").accordion({
  collapsible: true,
  active: false,
  heightStyle: "content",
  header: "a.header"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<ul id="testJ">
  <li>
    <a href="#"><i class="fa fa-home"></i> &nbsp;&nbsp;A</a>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-shopping-cart"></i> &nbsp;&nbsp;B</a>
    <ul>
      <li><a href="#">B1</a></li>
      <li><a href="#">B2</a></li>
      <li><a href="#">B3</a></li>
      <li><a href="#">B4</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-clipboard"></i> &nbsp;&nbsp;&nbsp;C</a>
    <ul>
      <li><a href="#">C1</a></li>
      <li><a href="#">C2</a></li>
      <li><a href="#">C3</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-box"></i> &nbsp;&nbsp;D</a>
    <ul>
      <li><a href="#">D1</a></li>
      <li><a href="#">D2</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-chart-pie"></i> &nbsp;&nbsp;E</a>
    <ul>
      <li><a href="#">E1</a></li>
      <li><a href="#">E2</a></li>
      <li><a href="#">E3</a></li>
      <li>
        <a class="header" href="#">E4</a>
        <ul>
          <li><a href="#">E4I</a></li>
          <li><a href="#">E4II</a></li>
        </ul>
      </li>
      <li><a href="#">E5</a></li>
      <li><a href="#">E6</a></li>
      <li><a href="#">E7</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-truck"></i> &nbsp;F</a>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-user"></i> &nbsp;&nbsp;G</a>
    <ul>
      <li><a href="#">G1</a></li>
      <li><a href="#">G2</a></li>
    </ul>
  </li>
</ul>

Solution

So the problem is with using header on nested Accordion. I found this solution at https://bugs.jqueryui.com/ticket/9020.

$("ul.testJ").accordion({
  collapsible: true,
  active: false,
  heightStyle: "content",
  header: "> li>a:not(.header)"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<ul class="testJ">
  <li>
    <a class="header" href="#"><i class="fa fa-home"></i> &nbsp;&nbsp;A</a>
  </li>
  <li>
    <a href="#"><i class="fa fa-shopping-cart"></i> &nbsp;&nbsp;B</a>
    <ul>
      <li><a class="header" href="#">B1</a></li>
      <li><a class="header" href="#">B2</a></li>
      <li><a class="header" href="#">B3</a></li>
      <li><a class="header" href="#">B4</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-clipboard"></i> &nbsp;&nbsp;&nbsp;C</a>
    <ul>
      <li><a class="header" href="#">C1</a></li>
      <li><a class="header" href="#">C2</a></li>
      <li><a class="header" href="#">C3</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-box"></i> &nbsp;&nbsp;D</a>
    <ul>
      <li><a class="header" href="#">D1</a></li>
      <li><a class="header" href="#">D2</a></li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-chart-pie"></i> &nbsp;&nbsp;E</a>
    <ul class="testJ">
      <li><a class="header" href="#">E1</a></li>
      <li><a class="header" href="#">E2</a></li>
      <li><a class="header" href="#">E3</a></li>
      <li>
        <a href="#">E4</a>
        <ul>
          <li><a class="header" href="#">E4I</a></li>
          <li><a class="header" href="#">E4II</a></li>
        </ul>
      </li>
      <li><a class="header" href="#">E5</a></li>
      <li><a class="header" href="#">E6</a></li>
      <li><a class="header" href="#">E7</a></li>
    </ul>
  </li>
  <li>
    <a class="header" href="#"><i class="fa fa-truck"></i> &nbsp;F</a>
  </li>
  <li>
    <a href="#"><i class="fa fa-user"></i> &nbsp;&nbsp;G</a>
    <ul>
      <li><a class="header" href="#">G1</a></li>
      <li><a class="header" href="#">G2</a></li>
    </ul>
  </li>
</ul>