JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
Heading text.
<a class="accordion-toggle" data-toggle="in" href="#collapseOne" aria-expanded="false">
(Click to show/hide)
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Lorem ipsum.
</div>
</div>
</div>
</div>
JavaScript
$(function(){
$(window).resize(function() { // Optional: if you want to detect when the window is resized;
processBodies($(window).width());
});
function processBodies(width) {
if(width > 768) {
$('.accordion-body').collapse('show');
}
else {
$('.accordion-body').collapse('hide');
}
}
processBodies($(window).width());
});