Home / Questions / 202284
Accepted
Shassain
Asked: 2020-10-06 09:27:28 +0800 CST 2020-10-06 09:27:28 +0800 CST

How to do a bootstrap Collapse in html tables?

  • 772

I would like to get this toggle bootstrap effect on a table i.e. get that scroll up effect but all I get is it fading in and out with some horrible effect.

I leave you a bit of code:

$(function () {
    $('.btn_show').click(function (ev) {
            $('#contenido').slideToggle("slow");

    });
})
.input-sm{
        height: 20px;
        font-size: 9pt;
        width: 100%;
    }
    .letra{
        font-size: 9pt;
    }
    table {
        border-collapse: collapse;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
    }

    tr {
        border-bottom: 1px solid #000;
    }
    input:[type=text]{
        border-bottom: 1px solid #C00;
        border: 0;
        outline: none; 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="100%">
            <thead style="background:#000;text-align:center;">
                <tr>
                    <td colspan="4">
                        <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
                    </td>
                </tr>
            </thead>
            <tbody id="contenido" style="display:none">
                <tr>
                    <th> 
                    Peso RN:
                    </th>
                    <td>
                        <input type="text" class="input-sm">
                    </td>
                    <th>Parto:</th>
                    <td>
                        <input type="text" class="input-sm">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Obs. Perinatales
                    </td>
                    <td colspan="2">
                        <input type="text" class="input-sm">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Obs. Perinatales
                    </td>
                    <td colspan="2">
                        <input type="text" class="input-sm">
                    </td>
                </tr>
            </tbody>
                
        </table>

How to get that scroll effect in an html table?

javascript

3 Answers

  1. Best Answer

    You must add two more options to your CSS, apply a display:blockto the element tbody, when performing this process, it will be necessary to modify the width of the rows trand tbody (otherwise it would be misaligned) , this is achieved withdisplay:table;width:100%;

    Also use the ev.preventDefault();when performing the clickon a link and it will not perform the redirection. ;)

    eg

    $(function () {
    $('.btn_show').click(function (ev) {
    	ev.preventDefault();
        $('#contenido').slideToggle("slow");
    });
})
    .input-sm{
        height: 20px;
        font-size: 9pt;
        width: 100%;
    }
    .letra{
        font-size: 9pt;
    }
    
    table {
        border-collapse: collapse;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
    }
    tbody {
        display:block;
    }
    thead, tbody tr {
        display:table;
        width:100%;
    }
    tr {
        border-bottom: 1px solid #000;
    }
    input:[type=text]{
        border-bottom: 1px solid #C00;
        border: 0;
        outline: none; 
    } 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
    <thead style="background:#000;text-align:center;">
        <tr>
            <td colspan="4">
                <a class="btn_show" href="#!" 
                style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
            </td>
        </tr>
    </thead> 
    
    <tbody id="contenido" style="display: none;" >
        <tr>
            <td> 
            Peso RN:
            </td>
            <td>
                <input type="text" class="input-sm">
            </td>
            <td>Parto:</td>
            <td>
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Obs. Perinatales
            </td>
            <td colspan="2">
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Obs. Perinatales
            </td>
            <td colspan="2">
                <input type="text" class="input-sm">
            </td>
        </tr>
    </tbody>
</table>

    • 4

  2. Change the display: nonefrom <tbody>to display: blockthat way what you are looking for is fulfilled

    $(function() {
  $('.btn_show').click(function(ev) {
    $('#contenido').slideToggle("slow");

  });
})
    .input-sm {
  height: 20px;
  font-size: 9pt;
  width: 100%;
}

.letra {
  font-size: 9pt;
}

table {
  border-collapse: collapse;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  width: 100%;
}

tr {
  border-bottom: 1px solid #000;
}

input:[type=text] {
  border-bottom: 1px solid #C00;
  border: 0;
  outline: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="100%">
  <thead style="background:#000;text-align:center;">
    <tr>
      <td colspan="4">
        <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
      </td>
    </tr>
  </thead>
  <tbody id="contenido" style="display:block">
    <tr>
      <th>
        Peso RN:
      </th>
      <td>
        <input type="text" class="input-sm">
      </td>
      <th>Parto:</th>
      <td>
        <input type="text" class="input-sm">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Obs. Perinatales
      </td>
      <td colspan="2">
        <input type="text" class="input-sm">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Obs. Perinatales
      </td>
      <td colspan="2">
        <input type="text" class="input-sm">
      </td>
    </tr>
  </tbody>

</table>

    • 3

  3. I misspelled the previous answer, this should work

        <table width="100%">
        <thead style="background:#000;text-align:center;">
            <tr>
                <td colspan="4">
                    <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
                </td>
            </tr>
        </thead>    
</table>
    <div id="contenido" style="display: block;">
    <table style="display: table;">
        <tbody style="">
            <tr>
                <th> 
                Peso RN:
                </th>
                <td>
                    <input type="text" class="input-sm">
                </td>
                <th>Parto:</th>
                <td>
                    <input type="text" class="input-sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Obs. Perinatales
                </td>
                <td colspan="2">
                    <input type="text" class="input-sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Obs. Perinatales
                </td>
                <td colspan="2">
                    <input type="text" class="input-sm">
                </td>
            </tr>
        </tbody>

    </table>

    • 0