Accordion
An accordion allows users to toggle the display of sections of content
Accordion on BootstrapExamples
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use .accordion as a wrapper.
Once you’re set up, payouts arrive in your bank account on a 2-day rolling basis. Or you can opt to receive payouts weekly or monthly.
You can issue either partial or full refunds. There are no fees to refund a charge, but the fees from the original charge are not returned.
Disputed payments (also known as chargebacks) incur a $15.00 fee. If the customer’s bank resolves the dispute in your favor, the fee is fully refunded.
There are no additional fees for using our mobile SDKs or to accept payments using consumer wallets like Apple Pay or Google Pay.
<div class="accordion border-x border-top rounded" id="accordionExample">
<div class="card shadow-none border-bottom">
<div class="card-header py-0" id="headingOne"><button class="btn btn-link text-decoration-none btn-block py-2 px-0 text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><span class="fas fa-caret-right accordion-icon mr-3" data-fa-transform="shrink-2"></span><span class="font-weight-medium text-sans-serif text-900">How long do payouts take?</span></button></div>
<div class="collapse show" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body pt-2">
<div class="pl-4">Once you’re set up, payouts arrive in your bank account on a 2-day rolling basis. Or you can opt to receive payouts weekly or monthly.</div>
</div>
</div>
</div>
<div class="card shadow-none border-bottom">
<div class="card-header py-0" id="headingTwo"><button class="btn btn-link text-decoration-none btn-block py-2 px-0 collapsed text-left" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><span class="fas fa-caret-right accordion-icon mr-3" data-fa-transform="shrink-2"></span><span class="font-weight-medium text-sans-serif text-900">How do refunds work?</span></button></div>
<div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body pt-2">
<div class="pl-4">You can issue either partial or full refunds. There are no fees to refund a charge, but the fees from the original charge are not returned.</div>
</div>
</div>
</div>
<div class="card shadow-none border-bottom">
<div class="card-header py-0" id="headingThree"><button class="btn btn-link text-decoration-none btn-block py-2 px-0 collapsed text-left" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><span class="fas fa-caret-right accordion-icon mr-3" data-fa-transform="shrink-2"></span><span class="font-weight-medium text-sans-serif text-900">How much do disputes costs?</span></button></div>
<div class="collapse" id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body pt-2">
<div class="pl-4">Disputed payments (also known as chargebacks) incur a $15.00 fee. If the customer’s bank resolves the dispute in your favor, the fee is fully refunded.</div>
</div>
</div>
</div>
<div class="card shadow-none border-bottom">
<div class="card-header py-0" id="headingFour"><button class="btn btn-link text-decoration-none btn-block py-2 px-0 collapsed text-left" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><span class="fas fa-caret-right accordion-icon mr-3" data-fa-transform="shrink-2"></span><span class="font-weight-medium text-sans-serif text-900">Is there a fee to use Apple Pay or Google Pay?</span></button></div>
<div class="collapse" id="collapseFour" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body pt-2">
<div class="pl-4">There are no additional fees for using our mobile SDKs or to accept payments using consumer wallets like Apple Pay or Google Pay.</div>
</div>
</div>
</div>
</div>
