Bootstrap: Acordeón

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">

<div class="panel-group" id="accordion">
<div class="panel panel-default">
     <div idItem="xxx" class="panel-heading esAcordeon">
         <h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseXXX">
                  <span class="glyphicon glyphicon-file"></span>TITULO</a>
</h4>
</div>
<div id="collapseXXX" class="panel-collapse collapse">
<div class="panel-body">gran respuesta</div>
</div>
</div>
</div>

Si quieres que el div esté desplegado la clase será:
collapse.in
EJ) <div id="collapseXXX" class="panel-collapse collapse.in">...</div>

Para activarlos desde javascript:
$('#collapseLSG').on('shown.bs.collapse', function () {
   // Se ejecuta cuando se despliega del todo
});

$('#collapseLSG').on('hidden.bs.collapse', function () {
   // Se ejecuta cuando se repliega del todo
});

Más información en:
http://getbootstrap.com/javascript/#collapse-usage