Collapse nested accordion groups based on custom class

Question

I'm using Twitter Bootstrap 2.3.2 with Asp.net MVC.

I have a set of nested accordions on a tab pane and other accordions on other tab panes.

The External accordions are in an accordion-group and the Internal accordions are in another group, nested inside each External accordion.

The colours are applied using CSS rules on custom classes.

.accordion-toggle.outcome {
    background-color:#d9edf7;
}

.accordion-toggle.outcome.collapsed {
    background-color:White;
}

.accordion-toggle.achievement {
    background-color:#dff0d8;
}

.accordion-toggle.achievement.collapsed {
    background-color:White;
}

I need to force the full collapse of the open accordions depending on which new accordion is selected. If an internal accordion is selected then I only want the other internal accordions to close. If an external accordion is selected I want the internal and external accordions to close.

Closing means assigning the 'collapsed' class to the accordion-toggle, which determines the highlight colour of the accordion-heading.

I have the following javascript which needs amending to select the different levels of accordion. The class of 'outcome' for External and 'achievement' for internal are currently the only difference between the two.

I've tried a variety of if/else combinations but none of them seem to work. I've included the javascript I use when changing tabs as this might change how I need to approach this.

<script type="text/javascript">

    //need to collapse all when tab changes
    $('a[data-toggle="tab"]').on('shown', function (e) {            
        $('.accordion').find('.accordion-toggle').addClass('collapsed');
        $('.accordion').find('.accordion-body').removeClass('in');
        $('.accordion').find('.accordion-body').height('0px');                    
        }
         );

    //collapse accordion depending on class
    // from https://github.com/twbs/bootstrap/issues/7213#issuecomment-18547519
    $('.collapse').on('hide', function () {

        //do something to select internal or external accordion here...

                $('[href="#' + $(this).attr('id') + '"]').addClass('collapsed');

        });

</script>

The HTML for the above accordion set is as follows:

<div class="accordion" id="interventions">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse12">
        <label for="">Test Finance</label>
      </a>
    </div>
    <div id="collapse12" class="accordion-body collapse">
      <div class="accordion" id="intervention0">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse012">
              <label for="">Achievement Finance 3</label>
            </a>
          </div>
          <div id="collapse012" class="accordion-body collapse">
            <div class="accordion-inner">
              <div class="accordion-group">Test group</div>
            </div>
          </div>
        </div>
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention0" href="#collapse111">
              <label for="">Achievement Finance 2</label>
            </a>
          </div>
          <div id="collapse111" class="accordion-body collapse">
            <div class="accordion-inner">
              <div class="accordion-group">Test group</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle outcome collapsed" data-toggle="collapse" data-parent="#interventions" href="#collapse10">
        <label for="">Huge Money</label>
      </a>
    </div>
    <div id="collapse10" class="accordion-body collapse">
      <div class="accordion" id="intervention1">
        <div class="accordion-group">
          <div class="accordion-heading">
            <a class="accordion-toggle achievement" data-toggle="collapse" data-parent="#intervention1" href="#collapse010">
              <label for="">Achievement Finance 1</label>
            </a>
          </div>
          <div id="collapse010" class="accordion-body collapse">
            <div class="accordion-inner">
              <div class="accordion-group">Test group</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

I managed to sort this out using the following javascript. The custom classes are only used by the CSS to apply the correct colour to an accordion-toggle when it is open or collapsed.

The css is amended to:

.accordion-toggle.outcome {
    background-color:#d9edf7;
}

.accordion-toggle.achievement {
    background-color:#dff0d8;
}

.accordion-toggle.collapsed {
    background-color:transparent;
}

Thanks to Ammu for helping with this related question.

Javascript

//function to collapse all accordions when changing tabs
function tabCollapse() {
    $('.accordion').find('.accordion-toggle').addClass('collapsed');        
    $('.accordion').find('.accordion-body').removeClass('in');
    $('.accordion').find('.accordion-body').height('0px');
}

//function to fully collapse accordion on same page
function pageCollapse(inner) {
    $('#' + inner).find('.accordion-toggle').addClass('collapsed');        
    $('#' + inner).find('.accordion-body').removeClass('in');
    $('#' + inner).find('.accordion-body').height('0px');
}

//collapse all when tab changes
$('a[data-toggle="tab"]').on('shown', function () {
    tabCollapse();
});

//collapse inner accordion on same page
$('.accordion').on('hidden', function (e) {        
    var inner = e.target.id;
    pageCollapse(inner);
});

//on hide remove colour
$('.accordion').on('hide', function (e) {
    var selected = e.target.id;
    $('#' + selected).siblings().find('.accordion-toggle').addClass('collapsed');
});