0

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--> 
1

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

| improve this answer | |
  • Adding depth="1|2" worked, thanks a mill. – steve Aug 26 '13 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.