I had a previous post here in which I was able to get a category tree working for 2 levels, however I'm having problems getting to work for a third level. I had edited the original post but never received an answer so that's why I'm creating a new question.
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} »</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} »</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} »</a></div>
{/if}
{if depth3_end}
</div><!-- END OF LEVEL 3-->
{/if}
{if depth2_end}
</div><!-- END OF LEVEL 2-->
{/if}
{if depth1_end}
{/if}
{/exp:gwcode_categories}
The HTML that is output:
<!-- LEVEL 1 CONTAINER -->
<h3><a href="#">Data Solutions »</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 »</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 »</a></div>
<div class="level3-item"><a href="#/copper/copper-connectivity">Copper Connectivity »</a></div>
<div class="level3-item"><a href="#/copper/plastics">Plastics »</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 »</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 »</a></div>
<div class="level3-item"><a href="#/fibre/fibre-connectivity">Fibre Connectivity »</a></div>
</div>
<!-- END OF LEVEL 3-->
</div>
<!-- END OF LEVEL 2-->