<ul class="nav cf-docs-sidenav">
        <?php $selectedCategory=''; foreach ((array) $docs as $category) { ?>
        <li><a href="javascript:void(0)"><?= htmlspecialchars($category['category']) ?><i class="icon-caret-right"></i></a>
            <ul data-category ="<?php echo $category['category']; ?>">
                <?php foreach ((array) $category['files'] as $files) {
                    if($files['filename']==$documentToLoad){
                        $selectedCategory=$category['category'];
                    }
                    ?>
                    <li><a class="docsLink" href="<?php echo site_url() . '/docs/' . $files['filename']; ?>"><?= htmlspecialchars($files['title']) ?></a></li>
                <?php } ?>
            </ul>
           </li>
        <?php } ?>
        <li><a href="<?php echo site_url('knowledge/help'); ?>"><i class="icon-caret-right"></i> Mission Portal help guide</a></li>
</ul>
<div id="preview" style="display:none;border: 2px;left:25%;top:25%;position: absolute;background: #FFFFFF;z-index: 10;margin: 0 auto;"></div>
<div id="background" style="display:none;border: 2px;position: absolute;background-color: #000000;height: 100%; width: 100%;top: 0;left: 0;z-index:2"></div>
<script type="text/javascript">
    $(document).ready(function() {

        $('.cf-docs-sidenav li > ul').hide();
        $('.cf-docs-sidenav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('active');  //show the ul if it has a current link in it (current page/section should be shown expanded
        $('.cf-docs-sidenav li:has(ul) > a').click(function(event){
            $(this).parent('li').addClass('active');
            $(this).toggleClass('accordionExpanded');
            $(this).find('i').toggleClass('icon-caret-down'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
            $(this).next('ul').slideToggle('fast');
            $(this).parent().siblings('li').children('ul:visible').slideUp('fast');
            $(this).parent().siblings('li').removeClass('active').find('a');
            $(this).parent().siblings('li').children('a').find('i').removeClass('icon-caret-down');
        });

       var $defaultTopicOpen=$('.cf-docs-sidenav li::nth-child(2) a');

       $('.cf-docs-sidenav >li').each(function(){
             var $container=$(this).find('ul');
             if($container.attr('data-category')=='<?= htmlspecialchars($selectedCategory) ?>'){
                 $(this).find('a').addClass('accordianExpanded').find('i').addClass('icon-caret-down');
                 $(this).addClass('active');
                 $container.show();
            }

       });
    });
</script>