how can I make the collapse target for a single table?

Question

how can I make the collapse target for a single table?

Navigation

#1 by (0 votes)

0

in advance thank you for your time, I have a problem with a table in which I use collapse, when I click on a row I display the information, but when I click on another, the last row that is moved does not return to its place. This is my PHP code.

if ($resultado->num_rows>0) {
        $salida.="<table class='table table-condensed'>
                <thead>
                    <tr id='titulo'>
                        <th scope='col'>Menu</th>
                        <th scope='col'>precio</th>
                    </tr>
                </thead>
                <tbody>";

        while ($fila = $resultado->fetch_assoc()) {
            $salida.="<tr data-toggle='collapse' data-target='#demo".$fila['ID']."'>
                        <td scope='row'>".$fila['nom_com']."</td>
                        <td>$".$fila['precio_com']."</td>
                    </tr>
                    <tr>
            <td colspan='6' class='hiddenRow'>
                <div id='demo".$fila['ID']."' class='collapse'>".$fila['descr_com']."</div>
            </td>
        </tr>";

        }

and it is assumed that with this JS code you can hide the other tables that do not have the focus but I do not know what I'm doing wrong.

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.in').collapse('hide');
});

If it serves you more here, take out the code

link

javascript php tablas

asked by Yayo Venegas 13.10.2018 в 17:35

source

1 answer

Error in reaction ecommerce Concurrency issues with Gunicorn + firebase + kubernetes in gcp

score 0 · Answer 1

The problem is the bootstrap version, it no longer uses the $('.collapse.in') but the $('.collapse.show') , so when you click it you can not find a collapse with the class in since you do not make it that way now, you arm it with the show class:

$('.collapse').on('show.bs.collapse', function () {
  $('.collapse.show').collapse('hide');
});

.hiddenRow {
    padding: 0 !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<table class='table table-condensed' style="border-collapse:collapse;">
  <thead>
    <tr id='titulo'>
      <th scope='col'>Menu</th>
      <th scope='col'>precio</th>
    </tr>
  </thead>
  <tbody>
    <tr data-toggle='collapse' data-target='#demo1'>
      <td scope='row'>1</td>
      <td>$250</td>
    </tr>
    <tr>
      <td colspan='2' class='hiddenRow'>
        <div id='demo1' class='collapse'>Descripcion 1</div>
      </td>
    </tr>
    <tr data-toggle='collapse' data-target='#demo2'>
      <td scope='row'>2</td>
      <td>$350</td>
    </tr>
    <tr>
      <td colspan='2' class='hiddenRow'>
        <div id='demo2' class='collapse'>Descripcion 2</div>
      </td>
    </tr>
  </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>