Creating a collapsible row in Bootstrap

Question

I have a .container with 2 .row's within, and each .row has 4 columns. The bottom row in my html is the row I want to be collapsed when the page loads.

When the button is pressed I would like the bottom row to expand, and when it is pressed again I would want it to collapse. What is the best way to create a collapsible row in Bootstrap? Most examples I've seen use tables and I am not using any here.

<!-- Team -->
<div id="team">
    <div class="container">
        <h1>Summit Team Members</h1>
        <hr>

        <div class="row">
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
                <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
                <h3>Team Member Name</h3>
                <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
        </div> <!-- end row -->

        <div class="row">
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
        </div> <!-- end row -->

    </div> <!-- end container -->
</div> <!-- end team -->

/*==================
TEAM
===================*/
#team {
text-align: center;
}

Answer 1

Just use collapse provided by Bootstrap.

You don't need any JavaScript code.

Basic markup for your row and button:

<div id="collapseExample" class="row collapse">
  Your content
</div>
<button class="btn btn-info btn-block btn-toggle" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Toggle</button>

If you want to have this row opened by default on page load just add in class to your row and change aria-expanded to true in your button

CODEPEN EXAMPLE

Answer 2

Please check this out. I used collapsible panel to do it, which is included in bootstrap.

Run Here... (jsfiddle)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="team">
  <div class="container">
    <h1>Summit Team Members</h1>
    <hr>


    <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="#collapseA" aria-expanded="true" aria-controls="collapseA">Collapse A</a>
                    </h4>
        </div>

        <div id="collapseA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="row">
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
          </div>
          <!-- end row -->
        </div>


        <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="#collapseB" aria-expanded="true" aria-controls="collapseB">Collapse B</a>
            </h4>
          </div>
<div id="collapseB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="row">
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
          </div>
        </div>
       </div>

      </div>
    </div>
  </div>
  <!-- end container -->
</div>

Additional Info: class="panel-collapse collapse in" (the in class makes the panel open/expanded) for default viewing of data.