Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Collapse #1

Natalie Curtis

Bank of America

Use this card to add funds to Your Front Balance. See Benefits

Billing address
Brian Robson
77408 Satterfield Motorway
Suite 469 New Antonetta, BC K3L6P6
New York, NY, 09122-9122
United States

Natalie Curtis

Payoneer

Use this card to add funds to Your Front Balance. See Benefits

Billing address
Brian Robson
9455 NE ALDERWOOD RD
C/O UZW-FH PORTLAND OREGON 97252
PORTLAND, OR, 97252-1777
United States

Natalie Curtis

Discover Network

Use this card to add funds to Your Front Balance. See Benefits

Billing address
Brian Robson
63703 Greenfelder Center Suite
767 South Jennings, QC Y4E-1K9
United States 
<!-- Accordion -->
<div id="paymentDetails" class="accordion">
  <!-- Card -->
  <div class="card">
    <div class="card-header card-collapse" id="cardHeadingOne">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block card-btn collapsed p-3" role="button"
                data-toggle="collapse"
                data-target="#cardOne"
                aria-expanded="false"
                aria-controls="cardOne">
          <span class="row align-items-center">
            <span class="col-md-6 mb-2 mb-md-0">
              <span class="media align-items-center">
                <img class="max-width-9 mr-3" src="../../assets/img/100x60/img1.jpg" alt="Image Description">
                <span class="media-body">
                  <span class="font-size-1">Visa Card ending in 9909</span>
                </span>
              </span>
            </span>
            <span class="col-4 col-md-2 text-md-right">
              <span class="btn btn-xs btn-soft-warning btn-pill">Primary</span>
            </span>
            <span class="col-6 col-md-3">
              <span class="d-block font-size-1">Expires: 12/2019</span>
            </span>
            <span class="col-2 col-md-1 text-right">
              <span class="card-btn-arrow">
                <span class="fas fa-arrow-down small"></span>
              </span>
            </span>
          </span>
        </button>
      </h5>
    </div>
    <div id="cardOne" class="collapse" aria-labelledby="cardHeadingOne" data-parent="#paymentDetails">
      <div class="card-body px-4">
        <!-- Card Details -->
        <div class="row">
          <div class="col-sm-7 mb-2 mb-sm-0">
            <h4 class="h6 mb-1">Natalie Curtis</h4>
            <span class="d-block font-size-1 mb-1">Bank of America</span>
            <p class="small">
              <span class="fas fa-info-circle mr-1"></span>
              Use this card to add funds to Your Front Balance. <a href="#">See Benefits</a>
            </p>
          </div>
          <div class="col-sm-5 mb-2 mb-sm-0">
            <h5 class="h6 mb-0">Billing address</h5>
            <h5 class="h6">Brian Robson</h5>
            <address class="font-size-1">
              77408 Satterfield Motorway<br>
              Suite 469 New Antonetta, BC K3L6P6<br>
              New York, NY, 09122-9122<br>
              United States
            </address>
            <button type="button" class="btn btn-xs btn-soft-secondary mr-1">Delete</button>
            <button type="button" class="btn btn-xs btn-primary">Edit</button>
          </div>
        </div>
        <!-- End Card Details -->
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card">
    <div class="card-header card-collapse" id="cardHeadingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block card-btn collapsed p-3" role="button"
                data-toggle="collapse"
                data-target="#cardTwo"
                aria-expanded="false"
                aria-controls="cardTwo">
          <span class="row align-items-center">
            <span class="col-md-6 mb-2 mb-md-0">
              <span class="media align-items-center">
                <img class="max-width-9 mr-3" src="../../assets/img/100x60/img2.jpg" alt="Image Description">
                <span class="media-body">
                  <span class="d-block font-size-1">Master Card ending in 1421</span>
                </span>
              </span>
            </span>
            <span class="col-4 col-md-2 text-md-right">
            </span>
            <span class="col-6 col-md-3">
              <span class="font-size-1">Expires: 06/2021</span>
            </span>
            <span class="col-2 col-md-1 text-right">
              <span class="card-btn-arrow">
                <span class="fas fa-arrow-down small"></span>
              </span>
            </span>
          </span>
        </button>
      </h5>
    </div>
    <div id="cardTwo" class="collapse" aria-labelledby="cardHeadingTwo" data-parent="#paymentDetails">
      <div class="card-body px-4">
        <!-- Card Details -->
        <div class="row">
          <div class="col-sm-7 mb-2 mb-sm-0">
            <h4 class="h6 mb-1">Natalie Curtis</h4>
            <span class="d-block font-size-1 mb-1">Payoneer</span>
            <p class="small">
              <span class="fas fa-info-circle mr-1"></span>
              Use this card to add funds to Your Front Balance. <a href="#">See Benefits</a>
            </p>
          </div>
          <div class="col-sm-5 mb-2 mb-sm-0">
            <h5 class="h6 mb-0">Billing address</h5>
            <h5 class="h6">Brian Robson</h5>
            <address class="font-size-1">
              9455 NE ALDERWOOD RD<br>
              C/O UZW-FH PORTLAND OREGON 97252<br>
              PORTLAND, OR, 97252-1777<br>
              United States
            </address>
            <button type="button" class="btn btn-xs btn-soft-secondary mr-1">Delete</button>
            <button type="button" class="btn btn-xs btn-primary">Edit</button>
          </div>
        </div>
        <!-- End Card Details -->
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card">
    <div class="card-header card-collapse" id="cardHeadingThree">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block card-btn collapsed p-3" role="button"
                data-toggle="collapse"
                data-target="#cardThree"
                aria-expanded="false"
                aria-controls="cardThree">
          <span class="row align-items-center">
            <span class="col-md-6 mb-2 mb-md-0">
              <span class="media align-items-center">
                <img class="max-width-9 mr-3" src="../../assets/img/100x60/img3.jpg" alt="Image Description">
                <span class="media-body">
                  <span class="d-block font-size-1">Discover ending in 4283</span>
                </span>
              </span>
            </span>
            <span class="col-4 col-md-2 text-md-right">
            </span>
            <span class="col-6 col-md-3">
              <span class="text-danger font-size-1">Expired: 03/2018</span>
            </span>
            <span class="col-2 col-md-1 text-right">
              <span class="card-btn-arrow">
                <span class="fas fa-arrow-down small"></span>
              </span>
            </span>
          </span>
        </button>
      </h5>
    </div>
    <div id="cardThree" class="collapse" aria-labelledby="cardHeadingThree" data-parent="#paymentDetails">
      <div class="card-body px-4">
        <!-- Card Details -->
        <div class="row">
          <div class="col-sm-7 mb-2 mb-sm-0">
            <h4 class="h6 mb-1">Natalie Curtis</h4>
            <span class="d-block font-size-1 mb-1">Discover Network</span>
            <p class="small">
              <span class="fas fa-info-circle mr-1"></span>
              Use this card to add funds to Your Front Balance. <a href="#">See Benefits</a>
            </p>
          </div>
          <div class="col-sm-5 mb-2 mb-sm-0">
            <h5 class="h6 mb-0">Billing address</h5>
            <h5 class="h6">Brian Robson</h5>
            <address class="font-size-1">
              63703 Greenfelder Center Suite<br>
              767 South Jennings, QC Y4E-1K9<br>
              United States
            </address>
            <button type="button" class="btn btn-xs btn-soft-secondary mr-1">Delete</button>
            <button type="button" class="btn btn-xs btn-primary">Edit</button>
          </div>
        </div>
        <!-- End Card Details -->
      </div>
    </div>
  </div>
  <!-- End Card -->
</div>
<!-- End Accordion -->
Copy

Collapse #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<!-- Basics Accordion -->
<div id="basicsAccordion">
  <!-- Card -->
  <div class="card mb-3">
    <div class="card-header card-collapse" id="basicsHeadingOne">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block d-flex justify-content-between card-btn p-3"
                data-toggle="collapse"
                data-target="#basicsCollapseOne"
                aria-expanded="true"
                aria-controls="basicsCollapseOne">
          Do you have any built-in caching?

          <span class="card-btn-arrow">
            <span class="fas fa-arrow-down small"></span>
          </span>
        </button>
      </h5>
    </div>
    <div id="basicsCollapseOne" class="collapse show"
         aria-labelledby="basicsHeadingOne"
         data-parent="#basicsAccordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card mb-3">
    <div class="card-header card-collapse" id="basicsHeadingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block d-flex justify-content-between card-btn collapsed p-3"
                data-toggle="collapse"
                data-target="#basicsCollapseTwo"
                aria-expanded="false"
                aria-controls="basicsCollapseTwo">
          Can I add/upgrade my plan at any time?

          <span class="card-btn-arrow">
            <span class="fas fa-arrow-down small"></span>
          </span>
        </button>
      </h5>
    </div>
    <div id="basicsCollapseTwo" class="collapse"
         aria-labelledby="basicsHeadingTwo"
         data-parent="#basicsAccordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card mb-3">
    <div class="card-header card-collapse" id="basicsHeadingThree">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block d-flex justify-content-between card-btn collapsed p-3"
                data-toggle="collapse"
                data-target="#basicsCollapseThree"
                aria-expanded="false"
                aria-controls="basicsCollapseThree">
          What access comes with my hosting plan?

          <span class="card-btn-arrow">
            <span class="fas fa-arrow-down small"></span>
          </span>
        </button>
      </h5>
    </div>
    <div id="basicsCollapseThree" class="collapse"
         aria-labelledby="basicsHeadingThree"
         data-parent="#basicsAccordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!-- End Card -->

  <!-- Card -->
  <div class="card mb-3">
    <div class="card-header card-collapse" id="basicsHeadingFour">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block d-flex justify-content-between card-btn collapsed p-3"
                data-toggle="collapse"
                data-target="#basicsCollapseFour"
                aria-expanded="false"
                aria-controls="basicsCollapseFour">
          How do I change my password?

          <span class="card-btn-arrow">
            <span class="fas fa-arrow-down small"></span>
          </span>
        </button>
      </h5>
    </div>
    <div id="basicsCollapseFour" class="collapse"
         aria-labelledby="basicsHeadingFour"
         data-parent="#basicsAccordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <!-- End Card -->
</div>
<!-- End Basics Accordion -->
Copy