JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<div id="accordion" class="accordion">
<div class="accordion-group">
<a href="#body1" data-parent="#accordion" data-toggle="collapse">
First Item <span class="caret"/>
</a>
<div id="body1" class="accordion-body in">First Content</div>
</div>
<div class="accordion-group">
<a href="#body2" data-parent="#accordion" data-toggle="collapse" class="collapsed">
Second Item <span class="caret"/>
</a>
<div id="body2" class="accordion-body collapse">Second Content</div>
</div>
<div class="accordion-group">
<a href="#body3" data-parent="#accordion" data-toggle="collapse" class="collapsed">
Third Item <span class="caret"/>
</a>
<div id="body3" class="accordion-body collapse">Third Content</div>
</div>
</div>
CSS
.collapsed .caret {
border-top: 0;
border-bottom: 4px solid #000000;
}
.accordion .caret {
margin-top: 8px;
margin-left: 2px;
}
JavaScript
/* ========================================================================
* Bootstrap: collapse.js v3.0.0
* http://twitter.github.com/bootstrap/javascript.html#collapse
* ========================================================================
* Copyright 2012 Twitter, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
* ======================================================================== */
+function ($) { "use strict";
// COLLAPSE PUBLIC CLASS DEFINITION
// ================================
var Collapse = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Collapse.DEFAULTS, options)
this.transitioning = null
if (this.options.parent) this.$parent = $(this.options.parent)
if (this.options.toggle) this.toggle()
}
Collapse.DEFAULTS = {
toggle: true
}
Collapse.prototype.dimension = function () {
var hasWidth = this.$element.hasClass('width')
return hasWidth ? 'width' : 'height'
}
Collapse.prototype.show = function () {
if (this.transitioning || this.$element.hasClass('in')) return
var dimension = this.dimension()
var scroll = $.camelCase(['scroll', dimension].join('-'))
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
var hasData = actives.data('collapse')
if (hasData && hasData.transitioning) return
actives.collapse('hide')
hasData ||...