Collapse

Show more on request: a button that opens a panel (disclosure)

A disclosure button

The button says whether its panel is open (aria-expanded).

Show the code

<div class="stack w-100">
<button type="button" class="btn" data-collapse aria-expanded="false" aria-controls="col-1">
<i class="ti ti-chevron-down">
</i>Show the delivery details</button>
<div id="col-1" class="dl-box" hidden>
<dl class="dl">
<div>
<dt>Supplier</dt>
<dd>Fresh Valley Dairy</dd>
</div>
<div>
<dt>Arrives</dt>
<dd>Tomorrow before 7 am</dd>
</div>
<div>
<dt>Order</dt>
<dd>PO-1060</dd>
</div>
</dl>
</div>
</div>

Details and summary

The native way, no script needed.

Why was this refund flagged?

Refunds over $50 need a manager’s PIN.

Show the code

<details class="demo-code w-100">
<summary>
<i class="ti ti-chevron-down">
</i>Why was this refund flagged?</summary>
<p class="p-3">Refunds over $50 need a manager’s PIN.</p>
</details>