Accordion html table

0

I'm doing an accordion in an html table. I would like that when you click the button just below the three clicked the div card card-body. Some examples of how to do

<table class="table table-responsive-sm table-striped font15 mb-0" id="myTable">
  <thead>
    <tr class="table-active">
      <th>Oportunidade</th>
      <th>Cliente</th>
      <th>Tipo</th>
      <th>Etapa</th>
      <th class="text-center">Acessos</th>
      <th>Receita</th>
      <th>Previsão</th>
      <th class="text-center">Opção</th>
    </tr>
  </thead>
  <tbody>
    <tr class="collapse" id="collapseExample">
      <td colspan="8">
        <div class="card card-body">
          {{prospectNome}}
        </div>
      </td>
    </tr>
    <tr class="accordion" ng-repeat="oportunidade in listaOportunidade | orderBy: 'prospectNome' | unique:'oportunidadeId' | betweenDate:'oportunidadePrevisao':startDate:endDate | dateRange:'oportunidadePrevisao':startDate:endDate | filter:pedido | filter: {prospectNome:pesquisa} track by $index"
      ng-if="oportunidade.oportunidadeFunil == 'NEGOCIAÇÃO' || oportunidade.oportunidadeFunil == 'FECHAMENTO' || oportunidade.oportunidadeFunil == 'PERDIDO'">
      <td class="align-middle font-weight-bold" ng-class="{'color-blue':oportunidade.oportunidadeOperadora == 'VIVO','text-danger':oportunidade.oportunidadeOperadora == 'CLARO','text-primary':oportunidade.oportunidadeOperadora == 'TIM'}">{{oportunidade.oportunidadeOperadora}}</td>
      <td class="align-middle">{{oportunidade.prospectNome}}</td>
      <td class="align-middle">{{oportunidade.oportunidadeTipo}}</td>
      <td class="align-middle"><span class="badge badge-pill p-2 font14" ng-class="{'badge-warning':oportunidade.oportunidadeFunil == 'NEGOCIAÇÃO','badge-success':oportunidade.oportunidadeFunil == 'FECHAMENTO','badge-danger':oportunidade.oportunidadeFunil == 'PERDIDO'}">{{oportunidade.oportunidadeFunil}}</span></td>
      <td class="text-center align-middle">{{oportunidade.oportunidadeLinhas}}</td>
      <td class="align-middle">{{oportunidade.oportunidadeReceita | currency}}</td>
      <td class="align-middle">{{oportunidade.oportunidadePrevisao | date:'dd/MM/yyyy'}}</td>
      <td class="text-center align-middle" ng-init="tooltip()">

        <button class="btn btn-info btn-sm teste" data-tt="tooltip" data-placement="top" title="Detalhes Oportunidade" data-toggle="collapse" data-target="#collapseExample" data-parent="#myTable" ng-click="detalheOportunidade(oportunidade.oportunidadeId,
                                        oportunidade.prospectNome, oportunidade.prospectCelular,oportunidade.oportunidadeTipo,
                                        oportunidade.oportunidadeData, oportunidade.prospectContato, oportunidade.oportunidadeLinhas,oportunidade.oportunidadeReceita, oportunidade.oportunidadeFunil, oportunidade.oportunidadeOperadora, oportunidade.oportunidadePrevisao, oportunidade.oportunidadeStatus,
                                        oportunidade.oportunidadeStatusCotacao,oportunidade.oportunidadeAtivacao, oportunidade.prospectWhats, oportunidade.prospectId)"><i class="fa fa-pencil"></i></button>
      </td>
    </tr>

  </tbody>
</table>
    
asked by anonymous 23.10.2018 / 20:24

0 answers