displaying category tree accordion for 3 levels

Question

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}  &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}

{/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

Here is the approach i used for 2 levels. Id written my own plugin to generate required categories, so would work equally well with gw cats. I also cached the list for a day.

 {exp:stash:set_list name="cats_level1" parse_tags="yes" save="yes" scope="site" replace="yes" refresh="{sn_stash_refresh}" }
        {exp:my_plugin:get_cats level = "1"}
            {stash:cat1_name}{cat_name}{/stash:cat1_name}
            {stash:cat1_id}{cat_id}{/stash:cat1_id}
            {stash:cat1_url}{cat_url_title}{/stash:cat1_url}
            {stash:cat1_count}{cat_count}{/stash:cat1_count}
        {/exp:my_plugin:get_cats}
    {/exp:stash:set_list}

    {exp:stash:get_list name = "cats_level1"}
        {exp:stash:set_list name="cats_level2_{cat1_id}" parse_tags="yes" save="yes" scope="site" replace="yes" refresh="{sn_stash_refresh}" }
            {exp:my_plugin:get_cats level = "2" parent = "{cat1_id}"}
                {stash:cat2_name}{cat_name}{/stash:cat2_name}
                {stash:cat2_url}{cat_url_title}{/stash:cat2_url}
                {stash:cat2_count}{cat_count}{/stash:cat2_count}
            {/exp:my_plugin:get_cats}
        {/exp:stash:set_list}
    {/exp:stash:get_list}

You could then loop through depth 3 (just like depth 2 above) and create your lists for each depth 2 category.

And display like this. I used the params to divide the categories into columns. Three columns for desktop, two columns for mobile and tablets.

{exp:stash:set_list name="params" parse_conditionals = "yes"}
        {if ress == 3}
            {stash:param}limit = "1/3"{/stash:param}
            {stash:param}offset = "1/3"  limit = "1/3"{/stash:param}
            {stash:param}offset = "2/3"{/stash:param}
        {/if}
        {if ress < 3}
            {stash:param}limit = "1/2"{/stash:param}
            {stash:param}offset = "1/2"{/stash:param}
        {/if}
    {/exp:stash:set_list}

  {exp:stash:get_list name = "params"}
  <div class="category_wrap">
                        {exp:stash:get_list:nested  name="cats_level1" scope="site" {params}}
                            <div class="item_wrap category_item rounded">
                                <a href="#" class="toggle rounded_top_left" cat_1="{cat1_id}"><h2 id="cat_{cat1_id}">{cat1_name} <span>({cat1_count})</span></h2></a>
                                <div class="toggle_{cat1_id}" style="display:none;">
                                    <ul>
                                        <li><a href="{path='{segment_1}/category'}/{cat1_url}">All</a></li>
                                        {exp:stash:get_list:nested:inner name="cats_level2_{cat1_id}" scope="site"}
                                        <li><a href="{path='{segment_1}/category'}/{cat2_url}">{cat2_name} ({cat2_count})</a></li>
                                        {/exp:stash:get_list:nested:inner}
                                    </ul>
                                </div>
                            </div>
                        {/exp:stash:get_list:nested}

                    </div>
                {/exp:stash:get_list}

Your inner most get_list will look like this

{exp:stash:get_list:nested:inner:innermost name="cats_level3_{cat2_id}" scope="site"}
<li><a href="{path='{segment_1}/category'}/{cat3_url}">{cat3_name} ({cat3_count})</a></li>
{/exp:stash:get_list:nested:inner:innermost}

Sorry for formatting, not so easy on ipad! Hope that gives you an approach. Code copied from live and edited a little, but not tested.