Open a specific accordion panel in a nested accordion (Bootstrap v3)

Question

I have a number of nested accordions. I am trying to open a specific (child) accordion from a table of contents. However, the parent accordion is not open, so while the child is expanding, it isn't apparent as the parent stays collapsed. I'm looking for a solution that allows me to open any specified nested accordion by also opening the parent accordion, if it is not already open.

Note, this question is related, but doesn't suggest a solution that will work for any nested accordion:

Linking to a nested accordion using Bootstrap 3

My html is as follows:

<ul id="toc">
    <li><a data-toggle="collapse" href="#yearCollapseOne" aria-expanded="false" aria-controls="yearCollapseOne">Year 2015/2016</a>
        <ul>
            <li><a href="#moduleCollapseOne">Module 1</a></li>
            <li><a href="#moduleCollapseTwo">Module 2</a></li>
        </ul>
    </li>
    <li><a data-toggle="collapse" href="#yearCollapseTwo" aria-expanded="false" aria-controls="yearCollapseTwo">Year 2014/2015</a>
        <ul>
            <li><a href="#moduleCollapseThree">Module 3</a></li>
            <li><a href="#moduleCollapseFour">Module 4</a></li>
        </ul>
    </li>
</ul>


<div class="panel-group" id="AcademicYears" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default year-details">

        <div class="panel-heading" role="tab" id="yearHeadingOne">
            <h2 class="panel-title">
                <a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#yearCollapseOne" aria-expanded="false" aria-controls="yearCollapseOne">
                    Year 2015/2016
                </a>
            <h2>
        </div> <!-- Panel heading -->

        <div id="yearCollapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="yearHeadingOne">
            <div class="panel-body">

                <div class="panel panel-default module-details">

                    <div class="panel-heading" role="tab" id="moduleHeadingOne">
                        <h3 class="panel-title">
                            <a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseOne" aria-expanded="false" aria-controls="moduleCollapseOne">
                                Module 1
                            </a>
                        <h3>
                    </div> <!-- Panel heading -->

                    <div id="moduleCollapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingOne">
                        <div class="panel-body">

                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>

                        </div> <!-- Module panel body -->

                    </div>

                </div> <!-- Module Panel -->

                <div class="panel panel-default module-details">

                    <div class="panel-heading" role="tab" id="moduleHeadingTwo">
                        <h3 class="panel-title">
                            <a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseTwo" aria-expanded="false" aria-controls="moduleCollapseTwo">
                                Module 2
                            </a>
                        <h3>
                    </div> <!-- Panel heading -->

                    <div id="moduleCollapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingTwo">
                        <div class="panel-body">

                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>

                        </div> <!-- Module panel body -->

                    </div>

                </div> <!-- Module Panel -->

            </div> <!-- Panel Body --> 

        </div> <!-- End of yearCollapseOne -->

    </div> <!-- Year Panel -->

    <div class="panel panel-default year-details">

        <div class="panel-heading" role="tab" id="yearHeadingTwo">
            <h2 class="panel-title">
                <a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#yearCollapseTwo" aria-expanded="false" aria-controls="yearCollapseTwo">
                    Year 2014/2015
                </a>
            <h2>
        </div> <!-- Panel heading -->

        <div id="yearCollapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="yearHeadingTwo">
            <div class="panel-body">

                <div class="panel panel-default module-details">

                    <div class="panel-heading" role="tab" id="moduleHeadingThree">
                        <h3 class="panel-title">
                            <a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseThree" aria-expanded="false" aria-controls="moduleCollapseThree">
                                Module 3
                            </a>
                        <h3>
                    </div> <!-- Panel heading -->

                    <div id="moduleCollapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingThree">
                        <div class="panel-body">

                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>

                        </div> <!-- Module panel body -->

                    </div>

                </div> <!-- Module Panel -->

                <div class="panel panel-default module-details">

                    <div class="panel-heading" role="tab" id="moduleHeadingFour">
                        <h3 class="panel-title">
                            <a class="accordion-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#moduleCollapseFour" aria-expanded="false" aria-controls="moduleCollapseFour">
                                Module 4
                            </a>
                        <h3>
                    </div> <!-- Panel heading -->

                    <div id="moduleCollapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="moduleHeadingFour">
                        <div class="panel-body">

                            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec qu </p>

                        </div> <!-- Module panel body -->

                    </div>

                </div> <!-- Module Panel -->

            </div> <!-- Panel Body --> 

        </div> <!-- End of yearCollapseTwo -->

    </div> <!-- Year Panel -->

</div>

Answer 1

My initial solution is as below:

$(document).ready(function() {
    $("#toc a").click(function() {
        var anchorAddress = $(this).attr("href");

        if(anchorAddress.startsWith("#module")) {
          var moduleDiv = $(anchorAddress);

          if(moduleDiv.length) {              
            var parentYearDiv = moduleDiv.parents('.year-details');            
            var yearCollapsibleDIV = parentYearDiv.find('div[id^="yearCollapse"]');

            if(yearCollapsibleDIV.length) {
              yearCollapsibleDIV.collapse('show');
              moduleDiv.collapse('show');
            }              
          }         
        }
    });
});

I'm happy to look at alternative solutions, as I'm pretty sure the above solution can be improved on ;-)