JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="accordion" id="accordions">
<div class="accordion-group">
<div class="accordion-heading"><a href="#group-1" data-parent="#accordions"
data-toggle="collapse" class="accordion-toggle">Accordion Group 1</a>
</div>
<div id="group-1" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas tempor vulputate. Donec
auctor libero eu justo eleifend eget dapibus mauris blandit. Mauris faucibus elementum mauris, a
vehicula elit auctor ut. Ut pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a href="#group-2" data-parent="#accordions"
data-toggle="collapse" class="accordion-toggle">Accordion Group 2</a>
</div>
<div id="group-2" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas tempor vulputate. Donec
auctor libero eu justo eleifend eget dapibus mauris blandit. Mauris faucibus elementum mauris, a
vehicula elit auctor ut. Ut pellentesque faucibus tempor. Curabitur a nisi purus.</p>
</div>
</div>
</div><div class="accordion-group">
<div class="accordion-heading"><a href="#group-3" data-parent="#accordions"
data-toggle="collapse" class="accordion-toggle">Accordion Group 3</a>
</div>
<div id="group-3" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....
JavaScript
$('#accordions').on('hide', function (event) {
console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})