How to keep Bootstrap panel expanded/collapsed when changing view

Question

I have 3 Bootstrap panels that expand/collapse when their headers are clicked. However when changing to another route id (for example for :id=CarModel1 to id=CarModel2 with /cars/details/:id as route), I want to keep their state as was in the previous id after the user messes around with the panels, so that the user can compare the different details immediately when changing views. How can I keep the panel state? Please, keep in mind I'm using ngRoute and not ui-Router.

Sample panel:

<div id="details">
    <div class="panel-heading detailsPanel">
        <a data-toggle="collapse" data-parent="#details" data-target="#collapseDetailsPanel">
            <h4>Additional Details</h4>
        </a>
    </div>
    <div id="collapseDetailsPanel" class="panel-collapse collapse">
        <div class="panel-body">
            <div>Lorem Ipsum</div>
        </div>
    </div>
</div>

Answer 1

Managed to do it by adapting a solution found here and using sessionStorage instead of $.cookie.

    $("#details").on('shown.bs.collapse', function() {
        var activeDetails = $("#details .in").attr('id');
        sessionStorage.setItem('activeDetailsGroup', activeDetails);
    });
    $("#details").on('hidden.bs.collapse', function() {
        sessionStorage.setItem('activeDetailsGroup', "inactive");
    });
    var lastDetails = sessionStorage.getItem('activeDetailsGroup');
    if (lastDetails !== "inactive") {
        //remove default collapse settings
        $("#details .panel-collapse").removeClass('in');
        //show the account_last visible group
        $("#" + lastDetails).addClass("in");
    }