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>