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() {
/*
$($(this).data("target")).modal("show");
*/
$('.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");
});
});
