Bootstrap Twitter collapse--multiple triggers
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
The desired functionality is to have one trigger visible when showing, the other when hiding. This should be achievable by taking advantage of the "collapsed" class which is added to the trigger when the target is collapsed.
However, without a corrective script only the trigger initiating the collapse gets the "collapsed" class added to it. All triggers collapsing the element should have the class added or removed.
<a class="open" href="#collapseTarget" data-toggle="collapse">Show</a>
<div id="collapseTarget" class="collapse in">
<a class="close" href="#collapseTarget" data-toggle="collapse">x</a>
<div>Collapsible content</div>
</div>
CSS
.open[data-toggle]:not(.collapsed){
display: none;
}
JavaScript
$(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
var $this = $(this), href
, target = $this.attr('data-target')
|| e.preventDefault()
|| (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
, option = $(target).data('collapse') ? 'toggle' : $this.data()
$('[data-target="'+target+'"],[href="'+target+'"]')[$(target).hasClass('in') ? 'removeClass' : 'addClass']('collapsed')
})