Q: Multi level accordion using bootstrap data-collapse

im trying to create a navigation bar, the accordion1 is collapsing when i click 2nd link and thats is ok but when i click the children of one and click to another parent link the children of after i click is not collapsing, just only one window open and closed all window even in child and grandchild too

<script src="http://ift.tt/wV40hO"></script>
<link href="http://ift.tt/1dgTxUQ" rel="stylesheet" type="text/css" />
<script src="http://ift.tt/OaRYTM"></script>
<style>
  #accordion1 li.panel {
    margin-bottom: 0px;
  }
</style>
</head>
<ul id="accordion1">
  <li class="panel">
    <a data-toggle="collapse" data-parent="#accordion1" href="#firstLink">Test1</a>
    <ul id="firstLink" class="collapse">
      <li class="panel">
        <a data-toggle="collapse" data-parent="#accordion2" href="#firstlinkchild">SubTest1</a>
        <ul id="firstlinkchild" class="collapse">
          <li>SubTest1.1</li>
          <li>SubTest1.1</li>
          <li>SubTest1.1</li>
        </ul>
      </li>
      <li>SubTest1</li>
      <li>SubTest1</li>
    </ul>

  </li>
  <li class="panel">
    <a data-toggle="collapse" data-parent="#accordion1" href="#secondLink">Test1</a>
    <ul id="secondLink" class="collapse">
      <li class="panel">
        <a data-toggle="collapse" data-parent="#accordion2" href="#secondlinkchild">SubTest2</a>
        <ul id="secondlinkchild" class="collapse">
          <li>SubTest2.1</li>
          <li>SubTest2.1</li>
          <li>SubTest2.1</li>
        </ul>
      </li>
      <li class="panel">
        <a data-toggle="collapse" data-parent="#accordion2" href="#secondlinkchild2">SubTest2</a>
        <ul id="secondlinkchild2" class="collapse">
          <li>SubTest2.1</li>
          <li>SubTest2.1</li>
          <li>SubTest2.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Test1</a>
  </li>
  <li><a href="#">Test1</a>
  </li>
</ul>