CODEWITHSUNDEEP
htmltwitter-bootstrap
Marcus
Marcus

Reputation: 6717

Bootstrap collapsing whole table

I know there is a way to collapse table rows in bootstrap, e.g this. But is it possible for me to have a button/link/etc. that I can click, which collapses the whole table instead of just table rows?

I am currently building tables based on database information and these tables can get pretty big. If i have 4-5 tables I'd like for the user to be aple to collapse/expand these tables as he/she chooses.

Is this possible somehow? I can not seem to find any answers when I google.

Upvotes: 2

Views: 5192

Answers (3)

indubitablee
indubitablee

Reputation: 8206

pherhaps something like this? using bootstraps accordian: http://jsfiddle.net/swm53ran/30/

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Table 1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Bob</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane</td>
                    <td>is cool</td>
                    <td>50</td>
                </tr>
            </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

you can add css to make the panel of the collapsible the table itself:

.panel-body {
    padding:0px;
}
.table {
    margin-bottom:0px;
}

Upvotes: 0

Master Yoda
Master Yoda

Reputation: 4402

I can provide Two solutions to this, JQuery and Bootstrap.

If you are open to a JQuery solution have a look at this.

JQUERY SOLUTION

HTML

<div class="collapsable">
   <table>
      <tr><td> word </td><td> another word </td></tr>
      <tr><td> word </td><td> another word </td></tr>
    </table>
</div><br />
<button> Click me </button>

CSS

table, th, td
{
    border: 1px solid black;
}

JQuery

$("button").on("click", function()
{
    $(".collapsable").slideToggle();
});

Fiddle Using a button you can slide the table up and down to hide/show.

If you are using Bootstrap 3.0 then how about this example?

BOOTSTRAP SOLUTION

HTML

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
      <table>
          <tr><td> word </td><td> another word </td></tr>
          <tr><td> word </td><td> another word </td></tr>
      </table>
  </div>
</div>

CSS

Same as above.

Boostrap collapse Fiddle

Upvotes: 2

wahwahwah
wahwahwah

Reputation: 3177

If you are able to place your tables inside of a panel (using Bootstrap 3.2 - for example), you can then collapse the panel-body element without using javascript. Here is an example:

<div class="panel panel-primary accordion"> <!-- Panel (collapasable) -->

    <div class="panel-heading"> <!-- Panel head -->
        <a class="accordion-toggle" data-toggle="collapse" data-parent=".accordion" href="#collapseOne">
            Collapse Me On Click!
        </a>           
    </div> <!-- END Panel head -->

    <div id="collapseOne" class="panel-collapse collapse in"> <!-- Collapsable section -->

        <div class="panel-body"> <!-- Panel body -->

            <table>
                <thead>
                    <tr>
                        <th>Col1</th>
                        <th>Col2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data</td>
                        <td>Data</td>
                    </tr>
                </tbody>

            </table>

        </div> <!-- END Panel body -->

    </div> <!-- END Collapse section -->

</div>

CSS (not really needed):

a {
    color: white;
}

table {
    width: 100%;
}

tr {
   border: solid 1px; 
}

And a Fiddle

Upvotes: 3

Related Questions