data-toggle

Srs, depois de 2 anos longe das web pages, estou precisando de ajuda... utilizei um exemplo (web), para fazer um conteúdo collapsável, mas precisei fazer uma implementação, para dinamizar o conteúdo, que funcionou em parte. O problema é que ao clicar no botão de expandir, se houver um outro elemento visivel, não fecha o atual, e ficam todos os elementos clicados expostos. ex. Se abrir o conteudo de a1, e depois clicar em a99999, vai abrir o a1 aberto(visivel) e também o a99999, e isto não é o ideal. Alguma ajuda, pls...

<style>.hiddenRow { padding: 0!important. }
</style>... <div class="container"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading">Fases</div> <div class="panel-body"> <table class="table table-condensed table-striped"> <thead> <tr><th></th><th>nome</th><th>Prêmio</th></tr> </thead> <tbody> <tr data-toggle="collapse" data-target="#a1" name="a1" class="accordion-toggle class2"> <td><button class="btn btn-default btn-xs"><i class="fa fa-eye" aria-hidden="true"></i></button></td> <td>nome</td><td>Vários</td> </tr> <tr> <td colspan="2" class="hiddenRow"> <div class="accordian-body collapse" id="a1"><div> </td> </tr> <tr data-toggle="collapse" data-target="#a2" name="a2" class="accordion-toggle class2"> <td><button class="btn btn-default btn-xs"><i class="fa fa-eye" aria-hidden="true"></i></button></td> <td>nome</td><td>Vários</td> </tr> <tr> <td colspan="2" class="hiddenRow"> <div class="accordian-body collapse" id="a2"><div> </td> </tr> </tbody> </div> </div> </div>
</div>...
</body> <script>
function LoadPage(onde,qual){ $(onde).load(qual, function(){ $(onde).slideDown(). }). } $(document).ready(function() {

 $('.class2').click( function() { //id = $(this).attr('id'). fd = $(this).attr('name'). //nome da div onde carregará o arquivo de mesmo nome LoadPage("#"+fd,"sitePages/instancias/"+fd+".php"). }). }).