Bootstrap accordion for nested navigation tree in Kirby -

i have pretty complex nested accordion tree navigation "working" @ http://www.medlargroup.com test site client.

it appears work correctly not collapsed default , incredibly long. attempted put various divs , classes around bootstrap intended got complex mess , inappropriate styling have over-write.

if advise me of javascript solution make boxes auto-collapse when not part of active tree appreciated.

the php generated nav follows:

n.b. variable $id set @ 0 outside , parsed in when snippet called. recursive function makes standard div wraps more complicated , alternative js solution more attractive.

<?php if(!isset($subpages)) $subpages = $site->pages() ?>   <?php $id+=1 ?> <ul id="accordiongroup_<?php echo $id ?>" class"collapse in">  <?php foreach($subpages->visible() $p): ?> <li class="depth-<?php echo $p->depth() ?>"> <a href="#accordiongroup_<?php echo $id+1 ?>" data-toggle="collapse" data-parent="<?php echo $id ?>" > <?php if($p->haschildren())     { echo $p->title() ?></a> <?php snippet('accordionmenu', array('subpages' => $p->children(), 'id' => $id)) ?>  <?php $id+=1;}    else { ?>     <a class=" <?php echo ($p->isactive()) ? 'active' : '' ?>" href="<?php echo $p->url() ?>"><?php echo $p->title() ?></a>  <?php } ?>       </li>   <?php endforeach;?> </ul> 

probably easiest solution use jquery plugin 1 https://github.com/tommcfarlin/collapsible-menus. it's easy use, , doesn't require in way of additional markup.

however, you're trying bootstrap, i'll try find solution using that. first thing notice errors in code;

<ul id="accordiongroup_2" class"collapse in"> 

should be

<ul id="accordiongroup_2" class="collapse in"> 

that may preventing of crucial styles working. essentially, collapse sub-menu, need give 'ul' class of "collapsed". it's matter of using logic work out active menu item, , not adding collapsed class that.

your problem arise trying work out parent 'li' don't collapse them either. 1 way on server side might create small function tests if 'li' element has child 'ul' child 'li' active. if so, set 'li' active too. you'll need data nested array first, , you'll need run though number of times maximum nest depth.