Twitter Bootstrap - Collapse.js: data-parent not behaving as it should?

gistfile1.txt

    <nav id="menu" role="navigation">
      <ul id="nav">
        <li class="menuitem"><a href="#" data-toggle="collapse" data-target="#subnav1" data-parent="#nav">Deelnemers</a>
          <ul class="subnav collapse" id="subnav1">
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
          </ul>
        </li>
        <li class="menuitem"><a href="#" data-toggle="collapse" data-target="#subnav2" data-parent="#nav">Deelnemers</a>
          <ul class="subnav collapse" id="subnav2">
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
          </ul>
        </li>  
        <li class="menuitem"><a href="#" data-toggle="collapse" data-target="#subnav3" data-parent="#nav">Deelnemers</a>
          <ul class="subnav collapse" id="subnav3">
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
          </ul>
        </li>  
        <li class="menuitem"><a href="#" data-toggle="collapse" data-target="#subnav4" data-parent="#nav">Deelnemers</a>
          <ul class="subnav collapse" id="subnav4">
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
          </ul>
        </li>  
        <li class="menuitem"><a href="#" data-toggle="collapse" data-target="#subnav5" data-parent="#nav">Deelnemers</a>
          <ul class="subnav collapse" id="subnav5">
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
            <li class="subnavitem"><a href="#">Cafetaria</a></li>
          </ul>
        </li>  
      </ul>                     
    </nav>