Displaying a category tree accordion with GWCode Categories & Bootstrap

Question

Edited (now trying to get this to work for a 3rd level of categories)

I'm trying to get an accordion menu to work with bootstrap and GWCODE Categories. The problem I'm having is determining when a category depth starts and ends so that I can open and close divs appropriately. I have 3 main categories, multiple 2nd level categories, and multiple 3rd level categories. Here's the code I have so far which I'm trying to get to work for the third level of categories:

{exp:gwcode_categories  style="linear" group_id="1" depth="1|2|3"}
    {if depth1_start}
    <div class="accordion-group">
        <div class="accordion-level1-header">
        <!-- LEVEL 1 CONTAINER -->
        <h3><a href="{site_url}index.php/{complete_path}">{cat_name}  &raquo;</a> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#{cat_url_title}-level2"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></h3>
        </div>
        {/if}
        {if depth2_start}
        <!-- LEVEL 2 CONTAINER -->
          <div id="{parent_url_title}-level2" class="accordion-level2 collapse">
        {/if}
          {if depth==2}
            <div class="level2-item"><a href="{site_url}index.php/{complete_path}">{cat_name}  &raquo;</a> <a data-toggle="collapse" data-parent="#accordion" href="#{cat_url_title}-level3"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></div>
          {/if}
            {if depth3_start}
            <!-- LEVEL 3 CONTAINER -->
              <div id="{parent_url_title}-level3" class="accordion-level3 collapse">
            {/if}
              {if depth==3}
                <div class="level3-item"><a href="{site_url}index.php/{complete_path}">{cat_name}  &raquo;</a></div>
              {/if}
          {if depth3_end}
            </div><!-- END OF LEVEL 3-->
          {/if}
        {if depth2_end}
          </div><!-- END OF LEVEL 2-->
        {/if}
    {if depth1_end}
   </div> <!-- END OF LEVEL 1-->
   {/if}
{/exp:gwcode_categories}

The HTML that is output:

<!-- LEVEL 1 CONTAINER -->
  <h3><a href="#">Data Solutions  &raquo;</a> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#data-solutions-level2"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></h3>
</div>
<!-- LEVEL 2 CONTAINER -->
<div id="data-solutions-level2" class="accordion-level2 collapse">
  <div class="level2-item"><a href="#/copper">Copper  &raquo;</a> <a data-toggle="collapse" data-parent="#accordion" href="#copper-level3"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></div>
  <!-- LEVEL 3 CONTAINER -->
  <div id="copper-level3" class="accordion-level3 collapse">
    <div class="level3-item"><a href="#/copper/copper-cable">Copper Cable  &raquo;</a></div>
    <div class="level3-item"><a href="#/copper/copper-connectivity">Copper Connectivity  &raquo;</a></div>
    <div class="level3-item"><a href="#/copper/plastics">Plastics  &raquo;</a></div>
  </div>
  <!-- END OF LEVEL 3--> 
</div>
<!-- END OF LEVEL 2--> 
<!-- LEVEL 2 CONTAINER -->
<div id="data-solutions-level2" class="accordion-level2 collapse">
  <div class="level2-item"><a href="#/fibre">Fibre  &raquo;</a> <a data-toggle="collapse" data-parent="#accordion" href="#fibre-level3"><span class="glyphicon glyphicon-plus-sign pull-right"></span></a></div>
  <!-- LEVEL 3 CONTAINER -->
  <div id="fibre-level3" class="accordion-level3 collapse">
    <div class="level3-item"><a href="#/fibre/fibre-cable">Fibre Cable  &raquo;</a></div>
    <div class="level3-item"><a href="#/fibre/fibre-connectivity">Fibre Connectivity  &raquo;</a></div>
  </div>
  <!-- END OF LEVEL 3--> 
</div>
<!-- END OF LEVEL 2--> 

Answer 1

Your code looks good to me, but maybe try adding the depth="1|2" parameter.